Open SharePoint Dialog box using JavaScript

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