SharePoint 2013/2010 OTB Model Dialog Pop Up Window

SharePoint 2013/2010 OTB Model Dialog Pop Up Window

To open a page in a pop up window, try this simple script.

Add the below script in the page your are good to go or add this in your master page and pass the parameter to this function to utilize this from any page or webpart.


< script type="text/javascript">
function OpenDialog(){        
var options = {            
url:'http://pageurlcomeshere',            
width: 500,            
height: 300 };          
SP.UI.ModalDialog.showModalDialog(options);
}     

</ script>

In the body
< a href="#" onclick="OpenDialog();">Open Dialog

PS: Use to avoid the execute script load errors. SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.showModalDialog", e);

Dialog Option
title: "Dialog Title" --> to set title for pop up window
allowMaximize: dialogAllowMaximize, -----> To allow maximize
showClose: dialogShowClose, ------> Show close button options



Advance Options: Modal Dialog Options Call backs


To handle the Ok or Cancel from Modal Dialog window, you can use the scripts as follows

Option 1: To refresh on any action of modal box  use below in option dialogReturnValueCallback:RefreshOnDialogClose
 Example:

< script type="text/javascript">
function OpenDialog(){        
var options = {            
url:'http://pageurlcomeshere',            
width: 500,            
height: 300,
dialogReturnValueCallback: RefreshOnDialogClose
};          
SP.UI.ModalDialog.showModalDialog(options);
}      
</ script>

Option 2:  To refresh on Ok but not close/cancel events
dialogReturnValueCallback: CheckOnDialogClose  //( below is the method)

OR

dialogReturnValueCallback: function(dialogResult) { if (dialogResult != SP.UI.DialogResult.cancel){SP.UI.ModalDialog.RefreshPage(dialogResult)}}


 Examples:
 function OpenDialog()
{
var e = {
            title: "Dialog Title",
            url: "http://Server/Pages/message.aspx",
            width: 500,
            height: 250,
           dialogReturnValueCallback: function(dialogResult)
        {
            if (dialogResult != SP.UI.DialogResult.cancel)
            {
                SP.UI.ModalDialog.RefreshPage(dialogResult)
            }
     }
            //dialogReturnValueCallback: CheckOnDialogClose
        };
        SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.showModalDialog", e);

}


/* Separate function to handle popup return back calls*/

function CheckOnDialogClose(result, target) {

     if(result==SP.UI.DialogResult.OK) {
        SP.UI.ModalDialog.RefreshPage(dialogResult)
       }
        if(result==SP.UI.DialogResult.cancel){ 
/*
          SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'Cancel Clicked');
           alert("Canceled Clicked"); //No refresh
*/
          }    

 }


Article Source: http://msdn.microsoft.com/en-us/library/office/ff410058%28v=office.14%29.aspx

Happy Browsing!
Relax..