You can use a JavaScript function for this purpose.
1) When you don't require a return from the Modal dialog.
function openModalWindow(strPageURL) {
var options = {
url: strPageURL,
title: "Title goes here",
showClose: true,
width: 600,
height: 400,
allowMaximize: false
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
2) When a return value is required to be captured by the Parent page
Include a callback parameter in the options specified
Option 1: Include in the options parameter collection
function openModalWindow(strPageURL) {
var options = {
url: strPageURL,
title: "Title goes here",
showClose: true,
width: 600,
height: 400,
allowMaximize: false
dialogReturnValueCallback: CloseDialogCallback
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
Option 2: Place the code after other option parameters are defined
var options = {
url: strPageURL,
allowMaximize: false
showClose: true
};
options.dialogReturnValueCallback = Function.createDelegate(null, CloseDialogCallback);
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
In the invoked function, you could specify the actions to do once the Modal Dialog closes, such as refreshing the parent page
function CloseDialogCallback(dialogResult, returnValue) {
if (returnValue.d) {
/*Do something */
}
if (dialogResult == SP.UI.DialogResult.OK) {
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.RefreshPage', SP.UI.DialogResult.OK);
}
}
3) Closing the Modal Dialog (Add script to the page in the Modal Dialog)
This can be done in two ways
window.frameElement.commonModalDialogClose(0 /* 0 for cancel */, 'Cancelled');
}
function closeOnOk() {
window.frameElement.commonModalDialogClose(1 /* 1 for ok */, 'OK result');
}
- OR -
Reference the JavaScript on your page.
<script src="/_layouts/15/SP.UI.Dialog.js" type="text/javascript"></script>
function closeOnCancel() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, 'Cancelled');
}
function closeOnOk() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'OK result');
}
To call these JavaScript functions from server side code use ScriptManager:
ScriptManager.RegisterStartupScript(this, this.GetType(), "closeScript", "closeOnOk();", true);
However, the final JavaScript function might give out a JavaScript error in some Internet Explorer versions.
1) When you don't require a return from the Modal dialog.
function openModalWindow(strPageURL) {
var options = {
url: strPageURL,
title: "Title goes here",
showClose: true,
width: 600,
height: 400,
allowMaximize: false
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
2) When a return value is required to be captured by the Parent page
Include a callback parameter in the options specified
Option 1: Include in the options parameter collection
function openModalWindow(strPageURL) {
var options = {
url: strPageURL,
title: "Title goes here",
showClose: true,
width: 600,
height: 400,
allowMaximize: false
dialogReturnValueCallback: CloseDialogCallback
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
Option 2: Place the code after other option parameters are defined
var options = {
url: strPageURL,
allowMaximize: false
showClose: true
};
options.dialogReturnValueCallback = Function.createDelegate(null, CloseDialogCallback);
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
In the invoked function, you could specify the actions to do once the Modal Dialog closes, such as refreshing the parent page
function CloseDialogCallback(dialogResult, returnValue) {
if (returnValue.d) {
/*Do something */
}
if (dialogResult == SP.UI.DialogResult.OK) {
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.RefreshPage', SP.UI.DialogResult.OK);
}
}
3) Closing the Modal Dialog (Add script to the page in the Modal Dialog)
This can be done in two ways
- Without referencing the SP.UI.Dialog.js
window.frameElement.commonModalDialogClose(0 /* 0 for cancel */, 'Cancelled');
}
function closeOnOk() {
window.frameElement.commonModalDialogClose(1 /* 1 for ok */, 'OK result');
}
- OR -
- using the SP.UI.Dialog.js
Reference the JavaScript on your page.
<script src="/_layouts/15/SP.UI.Dialog.js" type="text/javascript"></script>
function closeOnCancel() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, 'Cancelled');
}
function closeOnOk() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'OK result');
}
To call these JavaScript functions from server side code use ScriptManager:
ScriptManager.RegisterStartupScript(this, this.GetType(), "closeScript", "closeOnOk();", true);
However, the final JavaScript function might give out a JavaScript error in some Internet Explorer versions.
No comments:
Post a Comment