Dialogs in SharePoint 2010 – Part 1

Most of us SharePoint developers when posed with a question of showing content in a popup, we tend to make use of window.open() and window.showModalDialog(). Many of us forget about the fact that SharePoint 2010 itself has modal dialog to perform this operation.

In this part we will see how to setup a modal popup dialog box in SharePoint 2010 using the SP.UI.ModalDialog class.

View the popup below:

Script to achieve this:

function openDialog() {

var options = {

url: “http://www.microsoft.com“,

width: 1000,

height: 500,

title: “My First Modal Dialog”,

};

SP.UI.ModalDialog.showModalDialog(options);

}

//Call the popup method

openDialog();

                                                              OR

//Using the DialogOptions class.

var options = SP.UI.$create_DialogOptions();

options.title = “My Dialog Title”;

options.width = 400;

options.height = 600;

options.url = “/_layouts/DialogPage.aspx”;

SP.UI.ModalDialog.showModalDialog(options);

The options possible:

options Property	Description
title	A string that contains the title of the dialog.
url	A string that contains the URL of the page that appears in the dialog. If both url and html are specified, url takes precedence. Either url or html must be specified.
html	A string that contains the HTML of the page that appears in the dialog. If both html and url are specified, url takes precedence. Either url or html must be specified.
x	An integer value that specifies the x-offset of the dialog. This value works like the CSS left value.
y	An integer value that specifies the y-offset of the dialog. This value works like the CSS top value.
width	An integer value that specifies the width of the dialog. If width is not specified, the width of the dialog is autosized by default. If autosize is false, the width of the dialog is set to 768 pixels.
height	An integer value that specifies the height of the dialog. If height is not specified, the height of the dialog is autosized by default. If autosize is false, the dialog height is set to 576 pixels.
allowMaximize	A Boolean value that specifies whether the dialog can be maximized. true if the Maximize button is shown; otherwise, false.
showMaximized	A Boolean value that specifies whether the dialog opens in a maximized state. true the dialog opens maximized. Otherwise, the dialog is opened at the requested sized if specified; otherwise, the default size, if specified; otherwise, the autosized size.
showClose	A Boolean value that specifies whether the Close button appears on the dialog.
autoSize	A Boolean value that specifies whether the dialog platform handles dialog sizing.
dialogReturnValueCallback	A function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.
args	An object that contains data that are passed to the dialog.

Good Luck with your popup!!