Automatically Enable Dialog Framework for Hyperlinks

September 6 2010 3 comments

With the inclusion of the new dialog framework in Sharepoint 2010 it is quite easy to create stylish dialog windows that comply to the overall look and feel of your site. As Jomit Vaghela explains in his blog, all you need to do is put the parameter IsDlg=1 in your url and use the SP.UI.ModalDialog.showModalDialog method with that.

Here’s a modified jQuery version of the script that applies the SP.UI.ModalDialog.showModalDialog method to all links within the page that has the parameter IsDlg=1 in their target. Simply copy and paste the following function in your $(document).ready() to see it in action.

EDIT: Juha reported that the function breaks dialog links within a dialog. I modified the script a bit to filter out unwanted hyperlinks. Here’s the updated code:

$('a[href*=IsDlg=1]').
    filter(':not(.ms-dialog a)').
    click(function () {
        var options = {
            url: $(this).attr('href'),
            width: $(this).attr('width') ? $(this).attr('width') : 700,
            height: $(this).attr('height') ? $(this).attr('height') : 700,
            dialogReturnValueCallback: function () {
            }
        };
    SP.UI.ModalDialog.showModalDialog(options);
    return false;
});

Whenever you use links like these in your context, the dialog framework will be used to represent them:

<a href="/Pages/mySettingsPage.aspx?IsDlg=1">Lorem Ipsum</a>
<a width="500" height="400" href="/Pages/mySettingsPage.aspx?IsDlg=1">Lorem Ipsum with custom width and height</a>

And because of the unobtrusive nature of jQuery, the links will act normally if javascript is disabled.

Popularity: 1% [?]

3 comments to “Automatically Enable Dialog Framework for Hyperlinks”

  1. Viveka says:

    Works like charm…was looking for this solution on so many websites…Thanks a lott!!

  2. I am regular reader, how are you everybody? This paragraph posted at this web
    site is in fact pleasant.

  3. chelseavinh says:

    Your code is great. I have successfully applied. Thank you

Leave a Reply