SharePoint 2013: HTML Modal Popup using Sp.js

Introduction

This article will help in implementing modal popup for Sharepoint 2013 site. This article has code and the required steps for implementation.

Background

Web developer need popus in web sites most of the times.  There are multiple plug-ins available in the market for this purpose. Angular, JQuery, Bootstrap and even simple CSS-JavaScript can provide good popups in site. As we know more code will lead more bugs. Also page load speed increase if we avoid plugins. 

But as a SharePoint developer, I will suggest you use SP.js which provides out of the box functionality recommended by SharePoint 2013.

To use OutofBox popup without any plugin, below method is usefull.

Using the Code

Content editor approach in which HTML file contains all code (HTML/JS). Text file can be mapped to content editor from document library.

Follow the below steps for popup:

1. Create MyPopup.html file on file system
2. Add MyPopup.html in to document library "Documents"
3. Create web part page in Pages library of SharePoint site
4. Go to page and edit it
5. Add content editor webpart in webpart zone by selecting it from "Media & Content" group
6. Add path of MyPopup.html file in content editor tool part. Then save the page.

Now, the code implementation needed in MyPopup.html. Add the below code in file.

//////
<script type="text/javascript" src="/_layouts/15/SP.Core.js" />
  <script type="text/javascript" src="/_layouts/15/SP.Debug.js" />
  <script type="text/javascript" src="/_layouts/15/SP.Runtime.Debug.js" />
  <script type="text/javascript" src="/_layouts/15/SP.js" />
  <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>
  <script type="text/javascript" src="/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us"></script>
  <script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
//////

Many developers will ask why we need all these references, because you may observe few errors in browser console. It's not necessary that you will face same issues but to avoid any possibility, I suggest to follow the above javascript file order.

The below mentioned code avoids any jquery conflict.

<script type="text/javascript">
// This will avoid conflicts
jQuery.noConflict();
</script> 

SharePoint use out of box function from Sp.js to display popup.

<script type="text/javascript">

var myhtml = document.createElement('div');
myhtml.innerHTML = '<a href="http://myredirection.com">
<img src="http://mysite/doc/product.jpg" onclick="SP.UI.ModalDialog.commonModalDialogClose
(SP.UI.DialogResult.cancel); return false;" height="300px" width="98%"></a>';

function ShowPopup(){
        
    var options = SP.UI.$create_DialogOptions();
    
        options.title= " ",
        options.html = myhtml ,
        //options.url = null;
        options.width = 400;
        options.height = 300;
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    
    }

//you can call ShowPopup function on required event

</script>

Note: If you don't want title for popup, then add space into it. null or "" will not work. Also, to load Sp.js and related js, developer can use SP.SOD.executeFunc('sp.js', 'SP.ClientContext', MyFuction).

Points of Interest

This is the fastest way of creating popup in case you want less html in popup. Eg. Name, Address, Phone details.

Thanks

Please share your thoughts, let me know in case you face any issues while implementing.

Happy to help! :)