Showing posts from October 24, 2011

Using the SharePoint 2010 Modal Dialog

SharePoint 2010 introduces the new dialog framework which helps users stay in context of the page without navigating away from the page. Yes, the modal dialogs that pop up:

The JavaScript client object model provides the SP.UI.ModalDialog class to work with the dialog framework.
In order to work with the dialog framework, we need to first create the dialog options:
var options = SP.UI.$create_DialogOptions(); options.width = 500; options.height = 250; options.url = "/_layouts/StandardsPortal/ChangePassword.aspx"; options.dialogReturnValueCallback = Function.createDelegate( null, portal_modalDialogClosedCallback); As you can see from the above code, we set options on width, height and what is the URL the modal dialog should load. In this case, an Application Page. Notice that we also initialize the callback.
Once the options are set, you can now show the modal dialog:
SP.UI.ModalDialog.showModalDialog(options); Now warp this code into a function:
function po…