How to open a page in SharePoint 2010 Dialog Framework?

Dialog Framework

SharePoint 2010 provides pretty good dialog framework. Throughout SharePoint sites, Dialog framework has been used to avoid page redirections and keep user in same page. In SharePoint 2007 with help of Lightbox/JQuery, dialog framework can be enabled and used. But it has some limitations and time consuming.

So how to open a page in Dialog framework? Well, It's pretty simple. Just add Content Editor webpart in the page and add the below code.

<script type="text/javascript">
//User Defined Function to Open Dialog Framework
function OpenDialog(strPageURL) 
{
  var dialogOptions = SP.UI.$create_DialogOptions();
  dialogOptions.url = strPageURL;// URL of the Page
  dialogOptions.width = 750; // Width of the Dialog
  dialogOptions.height = 500; // Height of the Dialog
  dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
  SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
  return false;
}// Dialog close event capture function
function CloseCallback(strReturnValue, target) 
{
  if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
    {
   alert("User clicked Ok!");
    }
  if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
   {
   alert( "User clicked Cancel!");
   }
}

</script>

Now to open a page just provide link as

Just change the URL and provide as many links required.

<a href="/_layouts/settings.aspx" onclick="return OpenDialog('/_Layouts/settings.aspx');">Site Settings</a>

When any page invoked to open in Dialog Framework then SharePoint will pass isDlg=1 as parameter with URL. This Parameter can be passed manualy to any page and SharePoint will detect it and applies /_layouts/styles/dlgframe.css instead of CoreV4.css(the default css applied in all SharePoint Pages). The Difference between dlgframe.css and CoreV4.css is the Top bar and Quicklaunch are made hidden in dlgframe.css with CSS { Display:none; }. So If you open any Sharepoint page in Modal Dialog then you won't get Top Bar and Quick Launch.

Note: It's applicable only to Webparts Pages. If you open any Wiki Page in Modal Dialog then SharePoint will throw error "The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist.". So if you want to open a page in Modal Dialog then use "Site Actions -> More Options -> Page -> Webpart page". In this page you can add Content Editor Webpart and add your content.