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

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


Here we will discuss how we can show modal popup using 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.

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: