Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Tip/Trick

SharePoint 2013: HTML Modal Popup using Sp.js

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
30 Nov 2017CPOL2 min read 20.9K   1  
It's a SharePoint 2013 POC of modal popup in which HTML can be used as content of popup.

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.

JavaScript
//////
<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.

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

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

JavaScript
<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! :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --