Display modal pop up in SharePoint Online/2013/2016

This SharePoint tutorial, we will discuss how to show modal popup using the client-side code in SharePoint Online. The same code we can use to show a dialog box in SharePoint 2016/2013.

Display modal pop up in SharePoint

Here we will use a script editor web part to insert the client-side code into a SharePoint web part page.

Below is the code which will open the dialog box when the SharePoint web part page loads.

Edit the SharePoint web part page where you want to add the code and then add a script editor web part or content editor web part.

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, showModalPopUp);
});
function showModalPopUp() {
var options = {
url: ‘https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Employees/AllItems.aspx’,
title: ‘Employees’, //Set the title for the pop up
allowMaximize: false,
showClose: true,
width: 500,
height: 350
};
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
return false;
}
</script>

Below is the code which will display the modal popup on button click.

<script language="javascript" type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(“#btnShowPopup").click(function(){
showModalPopUp();
});
});
function showModalPopUp() {
var options = {
url: ‘https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Employees/AllItems.aspx’,
title: ‘Employees’,
allowMaximize: false,
showClose: true,
width: 500,
height: 350
};
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
return false;
}
</script>

<input type="button" id="btnShowPopup" value="Show Modal up"/>

Once you save the code and click on the button the dialog will open like below in the SharePoint page:

You may like following SharePoint tutorials:

Here we learned how to display modal popup in SharePoint using client-side code.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>