SharePoint
2010 provides a new feature Modal Dialogs box which is based on the JavaScript
client object modal. This popup can open up a new page while you are on the
current page, no need to redirect/navigate to the other page. In SharePoint OOB
functionalities this popup is used mostly to perform any CRUD operation on the
data. This dialog box provides an IFrame in which the data is displayed.
Below
is the sample JavaScript function you can invoke from any client side event
that will open the SharePoint modal dialog box.
function
OpenBlogPortalDialog(pageURL) {
var NewPopUp =
SP.UI.$create_DialogOptions();
NewPopUp.url
= pageURL;
NewPopUp.width
= 800;
NewPopUp.height
= 500;
SP.UI.ModalDialog.showModalDialog(NewPopUp);
}
|
Below
the screen shot shows how the popup looks like when is it opened on the current
page when the submit button is clicked.
Users
can drag the popup and can maximize the popup to full window; these behaviors of
the popup can be set in the JavaScript code.
Below
are the various other properties which can be set in the JavaScript function
for rendering the popup
Property Name
|
Type
|
Description
|
allowMaximize
|
boolean (true/false)
|
Determines the visibility of the maximize button (at top right
corner) for the modal dialog
|
args
|
object
|
The args property allows us to pass arbitrary properties into
our dialog.
|
autoSize
|
boolean (true/false)
|
|
dialogReturnValueCallback
|
function
|
This property accepts a callback function which gets executed
when the dialog is closed.
|
height
|
numeric
|
The height of the dialog
|
html
|
HTML Element
|
The HTML to be rendered in the window (when the URL property is
not specified)
|
showClose
|
boolean (true/false)
|
Determines the visibility of the close button (at top right
corner) for the modal dialog
|
showMaximized
|
boolean (true/false)
|
If set to true, the dialog will render maximized, i.e. it fills
the available screen space.
|
title
|
string
|
Title of the modal dialog. When no title is specified, the title
of the document referred to by the Url property is used instead.
|
url
|
string
|
The URL of the page to be shown in the dialog.
|
width
|
numeric
|
The width of the dialog to be displayed
|
x
|
numeric
|
Specifies the starting position from the left, where the dialog
is to be rendered
|
y
|
numeric
|
Specifies the starting position from the bottom, where the
dialog is to be rendered
|