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