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>

About these ads