How to show modal pop up in SharePoint Online or SharePoint 2016 using client side code?

How to show modal pop up in SharePoint Online or SharePoint 2016 using client side code?

Here we will discuss how we can show modal popup using the client-side code in SharePoint online. The same code will also work in SharePoint 2016. Here we will use a script editor web part to insert the code into a web part page.


Also, you can read:
Create a simple bootstrap navigation menu using content search web part in SharePoint 2013

Create folder and subfolder inside the document library using.Net client object model in SharePoint online

How to retrieve all content database names for SharePoint 2016 web applications using SharePoint server object model?

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

<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:

How to show modal pop up in SharePoint Online or SharePoint 2016 using client side code?
How to show modal pop up in SharePoint Online or SharePoint 2016 using client side code?


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →