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)
{
dialogOptions.url = strPageURL; var dialogOptions = SP.UI.$create_DialogOptions();// URL of the Page
dialogOptions.width = 500; // Width of the Dialog
dialogOptions.height = 400; // Height of the Dialog
options.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
SP.UI.ModalDialog.showModalDialog(options); // Open the Dialog
}
// 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>
<Script type="text/javascript"> //User Defined Function to Open Dialog Framework
function OpenDialog(strPageURL)
{
dialogOptions.url = strPageURL; var dialogOptions = SP.UI.$create_DialogOptions();// URL of the Page
dialogOptions.width = 500; // Width of the Dialog
dialogOptions.height = 400; // Height of the Dialog
options.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
SP.UI.ModalDialog.showModalDialog(options); // Open the Dialog
}
// 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/Project/Service.aspx" onclick="Javascript:OpenDialog('/_Layouts/Project/Service.aspx');">Service</a>