July 6, 2012

Showing a form in Sharepoint: Modal Dialog Box


Below is the javascript code-snippet to show a custom form in Modal-dialog Box:

-- Add the code in <Script> tags
    function OpenDialog(strPageURL) {
        var dialogOptions = SP.UI.$create_DialogOptions();
        dialogOptions.url = strPageURL; // URL of the Page
        dialogOptions.width = 750; // Width of the Dialog
        dialogOptions.height = 500; // Height of the Dialog
        dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
to capture dialog closed event
        SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
        return false;
    }

    function CloseCallback(result, target) {
        location.reload(true);
    }

-- Call the function as shown below
<a class="MBbuttontop" href="/Admin/SitePages/CalendarAdd.aspx" onclick="javascript:return OpenDialog('/Admin/SitePages/CalendarAdd.aspx');" target="_blank"><span>Add Calendar</span></a>

Note: So when you click on "Add Calendar" link you will shown a Modal-Dialog popup with your custom form.

1 comment:

Anonymous said...

Thank you for the code.
I wanted to use this to display multiple links on a page that open in a dialog window.

Migrate SharePoint 2010 Infopath to SharePoint Online

 Below are the steps to follow to migrate the Infopath data to SP Online.