SharePoint 2010: 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 with 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 is the screenshot that shows how the popup looks when is it opened on the current page when the submit button is clicked.
http://4.bp.blogspot.com/-EKgikgdoHwA/T57aC55gPTI/AAAAAAAAAwk/LmwtwrzwJEs/s640/SPModalDialig.png
Users can drag the popup and can maximize the popup to the 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 |