Contents
When SharePoint 2010 creates a modal dialog box, it employs a new client-side dialog box framework that you can also use. For the most part, the functionality is encapsulated in the SP.UI.Dialog Class and SP.UI.ModalDialog Class of the JavaScript (ECMAScript) Class Library.
Which is an example of a modal dialog box?
Good examples are the modal dialog boxes that open when you create, view, or edit an item in a SharePoint list. Each of these dialog boxes loads a SharePoint application page (NewForm.aspx, DispForm.aspx, or EditForm.aspx) in a pop-up window.
How to open modal dialog box from InfoPath form?
It is not difficult to imagine situations where you might want to invoke a modal dialog box from a Microsoft InfoPath 2010 form. A classic example is a data-picker control that opens a calendar so that the person who is filling out the form can browse to and select a date.
Although the pop-up window displays what is, technically speaking, a new page, the new page appears to open in the context of the page that you were on (see Figure 1). It feels like you are zooming in on the page instead of navigating away. Figure 1. SharePoint New Item dialog box
How to open a new list item content type?
You can also get most of this information if you open the content type form in the list using the “New Item” drop down under the “Items” tab at the top. Select the content type then right click in the modal pop up of the content type form and select “view source” (works in IE).
How to set an option in ModalDialog dialog?
The following table lists the available dialog options. To set an option, set the indicated property of the options parameter. All of these options are optional. However, either the url or html option is required. A string that contains the title of the dialog. A string that contains the URL of the page that appears in the dialog.
The dialog box classes are implemented in the SP.UI.Dialog.js file, which is located in the LAYOUTS folder of your SharePoint 2010 installation. (The source code is minified for performance; if you want to browse, get the more readable companion file, SP.UI.Dialog.debug.js.)
How to set the width of the dialog?
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. An integer value that specifies the height of the dialog. If height is not specified, the height of the dialog is autosized by default.