Open Page in Modal dialog in SharePoint 2010

In many cases, we may need to Open a Page in popup window to avoid many redirections between pages. In SharePoint 2010, you can see many popup windows opening with good look and feel  also avoids page redirections and keep user in same page. In SharePoint 2007 with help of JQuery, dialog framework can be enabled and used. But it has some limitations and time consuming.

Below code snippet will help you to Open a Page in modal Popup window. Copy the below code and add to Content Editor webpart of your Page.

(Check inline comments for more details)

<script type="text/javascript"> //Below method will Open the page in Popup function OpenPopup(strPageURL) { var options = SP.UI.$create_DialogOptions(); // Setting the URL of the page to be opened in Popup options.url = strPageURL; // Setting Height and Width of the Popup options.width = 750; options.height = 500; // Sepcify the method name which captures the Callback event options.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Opens the Popup window SP.UI.ModalDialog.showModalDialog(options); return false; } // Callback event fires once the Popup window is closed function CloseCallback(strReturnValue, target) { // Return value will be “OK” when User clicked OK if (strReturnValue === SP.UI.DialogResult.OK) { alert("Retuned Ok"); } // Return value will be “Cancel” when User clicked Cancel if (strReturnValue === SP.UI.DialogResult.cancel) { alert("Returned Cancel"); } } </script>

Whenever a Page is opened in Modal Dialog box, SharePoint will add a Query string with the Page URL “isDlg=1”. This Query string differentiates between a normal page and Modal Dialog box. You might have noticed, when a page is opened in Modal dialog box few sections like Top bar, Quick launch might be disappeared.

Using the above query string value SharePoint identifies the Modal dialog box and applies /_layouts/styles/dlgframe.css instead of CoreV4.css.  If you want any custom controls to be hidden in the Modal Dialog box you can “s4-notdlg” class to the control which will be identified and made hidden in Modal dialog box.