Post
Ask Question

Show Modal Dialog in SharePoint 2013 Online

Code Snippet:
 
I have created a page and added the Script Editor Web Part. 
  1. <script type="text/javascript">  
  2.   
  3.     // Using the DialogOptions class  
  4.     function OpenDialog(strPageURL) {  
  5.         var dialogOptions = SP.UI.$create_DialogOptions();  
  6.         dialogOptions.url = strPageURL; // URL of the Page  
  7.         // Width of the Dialog  
  8.         dialogOptions.width = 800;  
  9.         // Height of the Dialog  
  10.         dialogOptions.height = 630;  
  11.         // Function to capture dialog closed event  
  12.         //dialogReturnValueCallback - A function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.  
  13.         dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);  
  14.         // Open the Dialog  
  15.         SP.UI.ModalDialog.showModalDialog(dialogOptions);  
  16.         return false;  
  17.     }  
  18.   
  19.     // Dialog close event capture function  
  20.     function CloseCallback(strReturnValue, target) {  
  21.         if (strReturnValue === SP.UI.DialogResult.OK) {  
  22.   
  23.         }  
  24.         if (strReturnValue === SP.UI.DialogResult.cancel) {  
  25.   
  26.         }  
  27.     }</script>  
  28.     <div><a onclick="return OpenDialog("https://c986.sharepoint.com/SitePages/Test.aspx");"  
  29.     href="https://c986.sharepoint.com/SitePages/Test.aspx">  
  30.     Click here to show Modal Dialog</a></div>  
Result:
 
 
 
 Reference:
 
 https://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx.