IBS Microsoft 365 and SharePoint Blog

Interactive Business Systems is now Planet Technology. Looking for a new job? We work with some of the biggest names in tech, and we’re hiring! Check out our open jobs and make your next career move with Planet.

I was trying to implement a modal popup for a web control and ran in to a few snags. So here I am with a few hints on how to use the SharePoint JavaScript modal dialog control.

Opening a Modal Dialog

To open a page in a modal dialog in SharePoint, you must create the options for the dialog and then pass these options to the showModalDialog method.

    var options =
    {
        title: 'My Modal Dialog',
        url: '/SitePages/Page.aspx',
        height: 400,
        width: 300
    }
    
    SP.UI.ModalDialog.showModalDialog(options);

Dispalying Embedded Page Content in a Modal Dialog

Notice that I am passing a URL of a webpage to the url property of the options object. What if instead, I want to include the embed the html in the webpage or create the content dynamically? The next example, shows using jQuery to get the html from within the webpage itself.

    var options =
    {
        title: 'Include content in webpage',
        html: $('#modalConent'),
        width: 400,
        heigth: 300
    }
    
    SP.UI.ModalDialog.showModalDialog(options);

Displaying Dynamic Content

But what if I want to create the html dynamically?  It is not obvious from the documentation but if you pass the html property raw html as a string, the following error will be generated.

SCRIPT5007: Unable to get property ‘showModalDialog’ of undefined or null reference

This is because the html property expects a DOM element.  We can use the createElement() function to do this.  See the following example.

    var options =
    {
        title: 'Create content dynamically',
        html: CreateContent(),
        width: 400,
        heigth: 300
    }
    
    SP.UI.ModalDialog.showModalDialog(options);
    
    function CreateContent()
    {
        var content = document.createElement('div');
        content.className = 'divClass';
    
        var title = document.createElement('div');
        title.className = 'titleClass';
        title.innerText = 'title text';
        content.appendElement(title);
    
        var body = document.createElement('div');
        body.className = 'bodyClass';
        body.innerText = 'body text';
        content.appendElement(body);
    
        return content;
    }

Responding to the Modal Dialog’s close event

What if we want to respond to the modal dialog closing?  An optional property to the showModalDialog method is dialogCloseCallback, which can be implemented as follows.

    var options =
    {
        title: 'Create content dynamically',
        dailogCloseCallback: ModalDialogClosed,
        width: 400,
        heigth: 300
    }
    
    SP.UI.ModalDialog.showModalDialog(options);
    
    function ModalDialogClosed()
    {
        // Some code that should be executed when the modal dialog is closed
    }

Conclusion

The SharePoint Modal Dialog can be quite useful and it is not too tricky to use as long as you know the common mistakes to avoid.  I hope that this post helps you out.