Open the SharePoint 2010 Modal Dialog

If you have a need to open a modal dialog for user interaction, here’s how you can accomplish it the “SharePoint 2010” way.

To start, create a new javascript function to handle opening the dialog. In the function, an options class will need to be created with the appropriate options for using SP.UI.ModalDialog.showModalDialog(options) method. These include the url, dimensions and any callback operations. There is also a querystring parameter that needs to be added to have SharePoint automatically turn off the “chrome” that is not necessary for a dialog. You can simply add “&IsDlg=1” to any SharePoint URL and the chrome will be turned off.

Here’s a script I’m using for my current project to open a form allowing users to add comments to an item.

<script type="text/javascript">
function OpenEditDialog(item_title, item_id){
        var options = {
            url:"http://sp2010dev/SitePages/NewComment.aspx?ItemID=" + item_id + "&title=" + item_title + "&IsDlg=1",
            width: 500,
            height: 300,
            dialogReturnValueCallback: DialogCallback
            };

        SP.UI.ModalDialog.showModalDialog(options);
    }

    function DialogCallback(dialogResult, returnValue){               }
</script>

The final step is to simply create a hyperlink or some other method of calling this function.

<a href="#" onclick="OpenEditDialog('Title',14);">Add A Comment</a>
Advertisements

7 thoughts on “Open the SharePoint 2010 Modal Dialog

  1. Is there a way that I can show only a part of the list item like if it is a page, I just need to show part of the content on the dialog with a more option

  2. Can I open the Modal Dialog directly via javascript. In my situation, I unfortunately can not host my form in a Web Part. Because i’ll open the form directly from aform library and display in browser to user. But i use an applicationpage, which i want to connect with my infopath.

    I’m very grateful if you could give me a tip how I can solve my problem.

  3. Hi,
    Thanks for a quick and easy solution!

    I’m trying to customise this to open a seperate .aspx page in my site. It’s simply a table of links, however when replacing the URL, the dialog appears, but does not display any content.
    Any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s