Hi Folks, in my earlier post we have seen how to launch a popup in any page using purely jquery approach. Click here...
In this post we are going to acheive this with Sharepoint framework.
Sharepoint has exposed some client side functions where we can easily call a page as modal dialog/ pop up.
SP.UI.ModalDialog.showModalDialog(options) Method helps us in acheiving the same.
Below is the actual implementation of this function.
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
autoSize: false,
width:600,
height:350,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
//If any action that needs to be done on parent page upon close of popup.
}
The above function is a generic one where we just need to call this function on the onclick of the button on which we are expecting the popin/modal dialog to be opened.
Parameters:
tUrl = absolute or relative path of the page which we need to see as a dialog
tTitle = Title of the modal dialog.
Hope this helps...
RELATED POST: Show and Hide a SharePoint modal dialog with HTML structure
RELATED POST: How to Show and Hide a jquery dialog popup
In this post we are going to acheive this with Sharepoint framework.
Sharepoint has exposed some client side functions where we can easily call a page as modal dialog/ pop up.
SP.UI.ModalDialog.showModalDialog(options) Method helps us in acheiving the same.
Below is the actual implementation of this function.
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
autoSize: false,
width:600,
height:350,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
//If any action that needs to be done on parent page upon close of popup.
}
The above function is a generic one where we just need to call this function on the onclick of the button on which we are expecting the popin/modal dialog to be opened.
Parameters:
tUrl = absolute or relative path of the page which we need to see as a dialog
tTitle = Title of the modal dialog.
Hope this helps...
RELATED POST: Show and Hide a SharePoint modal dialog with HTML structure
RELATED POST: How to Show and Hide a jquery dialog popup
