Show Modal Dialog in SharePoint 2013 Online

In this blog you will see how to open the page or list forms as modal dialog in SharePoint 2013 Online.

Code Snippet:

 

I have created a page and added the Script Editor Web Part. 

<script type="text/javascript">

    // Using the DialogOptions class
    function OpenDialog(strPageURL) {
        var dialogOptions = SP.UI.$create_DialogOptions();
        dialogOptions.url = strPageURL; // URL of the Page
        // Width of the Dialog
        dialogOptions.width = 800;
        // Height of the Dialog
        dialogOptions.height = 630;
        // Function to capture dialog closed event
        //dialogReturnValueCallback - A function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.
        dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
        // Open the Dialog
        SP.UI.ModalDialog.showModalDialog(dialogOptions);
        return false;
    }

    // Dialog close event capture function
    function CloseCallback(strReturnValue, target) {
        if (strReturnValue === SP.UI.DialogResult.OK) {

        }
        if (strReturnValue === SP.UI.DialogResult.cancel) {

        }
    }</script>
    <div><a onclick="return OpenDialog("https://c986.sharepoint.com/SitePages/Test.aspx");"
    href="https://c986.sharepoint.com/SitePages/Test.aspx">
    Click here to show Modal Dialog</a></div>

Result:

 

 

 

 Reference:

 

 https://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx.