SharePoint Online Show modal pop up using client side code JSOM

---

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.

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, click the button and the dialog will open.

Hope this will be helpful.

---