This article will help in implementing modal popup for Sharepoint 2013 site. This article has code and the required steps for implementation.
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:
- Create MyPopup.html file on file system
- Add MyPopup.html in to document library "Documents"
- Create web part page in Pages library of SharePoint site
- Go to page and edit it
- Add content editor webpart in webpart zone by selecting it from "Media & Content" group
- 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.
The below mentioned code avoids any jquery conflict.
SharePoint use out of box function from Sp.js to display popup.
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>';
var options = SP.UI.$create_DialogOptions();
options.title= " ",
options.html = myhtml ,
options.width = 400;
options.height = 300;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
Note: If you don't want title for popup, then add space into it.
"" 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.
Please share your thoughts, let me know in case you face any issues while implementing.
Happy to help! :)