Dev Notes

Notes on Development with Microsoft Technologies

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


    function DialogCallback(dialogResult, returnValue){               }

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>

Author: Chris Quick

I have been a developer of web based solutions since early 2001 delivering solutions to a wide array of organizations using ASP, ASP.NET and SharePoint. I was introduced to SharePoint in 2003 when the consulting firm I worked for at the time introduced it into the workplace. I began working with MOSS 2007 as soon as Microsoft released the RTM version in November 2006. The platform was implemented at the organization I worked for in 2007 and went live in March of that year. I was tasked with the administration and ongoing development of the platform. I currently work as a SharePoint Architect with Artis Consulting, developing solutions for a wide variety of business problems. The goal of this blog is to share my discoveries developing solutions with SharePoint. I welcome your comments and feedback to any post -- and I welcome suggestions for future topics.

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. Pingback: Display a NewItem Form in a Modal Dialog in SharePoint 2010 « Drift Bottle

  3. 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.

  4. 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?

  5. Pingback: SharePoint Daily » Blog Archive » SharePoint & the iPad; Top Cloud Collaboration Apps; Lessons from Cloud Deployment

  6. Pingback: SharePoint & the iPad; Top Cloud Collaboration Apps; Lessons from Cloud Deployment - SharePoint Daily - Bamboo Nation

Leave a Reply

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

You are commenting using your 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