Click here to Skip to main content
13,798,833 members
Click here to Skip to main content
Add your own
alternative version

Stats

8.1K views
1 bookmarked
Posted 30 Nov 2017
Licenced CPOL

SharePoint 2013: HTML Modal Popup using Sp.js

, 30 Nov 2017
Rate this:
Please Sign up or sign in to vote.
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.

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

License

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

Share

About the Author

Bajirao_
Software Developer
India India
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.181207.3 | Last Updated 30 Nov 2017
Article Copyright 2017 by Bajirao_
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid