Floating the SP.UI.ModalDialog

I’ve been using more of the SharePoint 2010 Client Object Model lately and had a need for a lightbox UI. I decided to use SP.UI.ModalDialog.showModalDialog(…), but found it irritating that the rendered DIV did not float by default.

So I turned to jQuery to calculate and set an offset to guarantee that the modal dialog will always render mid-window. Here is a very simple way to float the ModalDialog window; the ‘html’ argument is your HTML markup, or you can alter this to pass in a URL.

    function openDialog(html) {
        var _options = { html: html,
            allowMaximize: false,
            autoSize: true,
            showClose: true,
            title: "Zoom"
        var y = $(window).scrollTop();
        var boxBorder = $(window).height() - $(".ms-dlgContent").height();
        y = y + boxBorder / 2;
        $(".ms-dlgContent").css({ position: 'absolute', top: y });

About generation12

I am a SharePoint/.NET consultant in the twin cities.
This entry was posted in Customization, SharePoint 2010. Bookmark the permalink.

5 Responses to Floating the SP.UI.ModalDialog

  1. hveiras says:

    Hi Russ, Your solution does not work for me (well it almost work). If I debug the js it works, but if I just run it directly it doesn’t. It seems there is a race condition between what .showModalDialog does and the js code trying to retrieve “.ms-dlgContent”.

    • generation12 says:

      Since the call to .showModalDialog is implemented as an AJAX call, it is possible that the jQuery code to select elements using the .ms-dlgContent class will execute just before the dialog actually is ready to render. I have not personally seen this issue, but it’s at least a possibility.

  2. Horák Jan says:

    Seems to be true. In Firefox and IE is jQuery to set css of dialog window fired too early. For me works in both browsers if code is placed in condition.

    if(SP.UI.ModalDialog.showModalDialog(option)) {
    // place .css call here

    Whole frontend is written in ExtJS and only few OOB forms are done in SP. Shame is that there are no listeners like on loaded, beforender etc for modal dialogs and not only for them. Who knows ExtJS know what I´m talking about. Hope SP 2013 will be better.

  3. Thanks for the tip. Really helped.

  4. Very neat trick, thank you for this tip!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s