SP.UI.ModalDialog.showModalDialog ; How to display a web page in an IFrame in Sharepoint 2010

In the latest version of Sharepoint, a very powerful library was introduced to make the life easier for the Sharepoint Developers. This library is basically a JavaScript library it can be use it anywhere in the Sharepoint Site.

If At some point we want to display a site inside an IFrame, this is probably the cleanest and elegant option. You call SP.UI.ModalDialog.showModalDialog and pass the page you want to display.

SP.UI.ModalDialog.showModalDialog(options), where options is a bunch of properties for the site to be display, please have a look:

• 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.

I think the best way to see how this work is by showing an example. Having a page called netsourcecodePage.aspx located under _layouts, we can do this to show it:

//Using the DialogOptions class.
var options = SP.UI.$create_DialogOptions();
options.title = "www.gabrielrenom.net";
options.width = 240;
options.height = 400;
options.url = "/_layouts/netsourcecodePage.aspx";
SP.UI.ModalDialog.showModalDialog(options);

Or we can always call it like this:

//Using a generic object.
var options = {
    title: "www.gabrielrenom.net",
    width: 240,
    height: 400,
    url: "/_layouts/netsourcecodePage.aspx" };
SP.UI.ModalDialog.showModalDialog(options);

Conclusion: This is probably the best approach we have to integrate our Sharepoint Web User Interface with another web applications.