Wednesday, August 24, 2011

How to Open/Close Modal Dialogs in SharePoint 2010

SharePoint 2010 comes with a new modal dialogs feature that allows you to Open Modal windows from you application pages or ribbons. In this post i will highlight on how to open and close Modal Dialogs in SharePoint 2010.

If you have an Application page and you want to open up a modal dialog this is what you want to write in JavaScript using COM (Client Object Model) :

In your page, Add the following button to open modal dialog:

input onclick="openPopup();" title="Open Modal" type="button" value="Open Modal Dialog"

On you Page Head "PlaceHolderAdditionalPageHead" content add the following JavaScript function implementation "openPopup":

function openPopup() {
var options = {
url: '/_layouts/MYSPDemo/DialogPage.aspx',
title: 'Modal Dialog',
allowMaximize: false,
showClose: true,
width: 600,
height: 500
}

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

DialogPage is an application Page in your solution as specified above, Now try to deploy you solution and click on your button, your application page is showing as modal dialog... THIS IS AWESOME !!

To close you modal window, this is the line you need to add on you cancel or close button on your page:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, "Cancelled");






Hope this helps, To get the full documentation for ModalDialog using Client Object model, here is the KB url:



Regards,
Mostafa Arafa
twitter.com/mostafaelzoghbi

No comments: