Open and Close a SharePoint modal dialog with HTML structure

HI Friends,

In this post we are going look at How to Open and Close a SharePoint Modal Dialog using HTML instead of webpage.

Generally we use SharePoint modal dialog in order to call a webpage as pop-in. But, in this post we are going to open a DIV as a pop-in using SharePoint modal dialogue SP.UI.ModalDialog.showModalDialog

Note: You can open any HTML structure as per your needs.

Please use the below code snippet which does this trick.

function OpenModaldialog() {
  SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    var element = document.createElement('div');
    element.innerHTML = '<div id="modalcontent">This is modal dialogue cocntent</div>';

    SP.UI.ModalDialog.showModalDialog({
     html: element,
     title: 'Dialogue box',
     allowMaximize: false,
     showClose: true,
     dialogReturnValueCallback : Function.createDelegate(null, CloseCallback),
     autoSize: true
    });
   }, "SP.js");
}

function CloseCallback(result, target) {
   //custom action if any
}

That's it, you just need to call the function OpenModaldialog(); on the onclick event of the button through which you want to launch the modal dialogue.

Hope this helps...

RELATED POST: How to Show and Hide a Modal Pop up Dialog in a SharePoint
RELATED POST: How to Open and Close a jquery dialog popup

Open and Close a Sharepoint Modal Dialog with URL

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