SharePoint 2010 has a robust modal dialog system that can be easily leveraged to build highly interactive solutions. Imaging being able to  pop-up item edit forms or displaying notifications all without redirecting the user back and forth!

Here is the client side JavaScript that will allow you to open any page within a dialog box-

//Handle the DialogCallback callback
function DialogCallback(dialogResult, returnValue){
    window.location = window.location;
}

//Open the Dialog
function OpenEditDialog(link){
    var options = {
        url:link + '&IsDlg=1',
        width: 700,
        height: 700,
        dialogReturnValueCallback: DialogCallback};
    SP.UI.ModalDialog.showModalDialog(options);
}

To invoke the dialog, simply call the OpenEditDialog function with the target URL.

Notice that the IsDlg=1 query string parameter is appended within the OpenEditDialog function. The presence of “IsDlg” dynamically loads the "/_layouts/styles/dlgframe.css” file which applies “display:none” to all items using the “s4-notdlg” css class. This effectively hides items of this class in a dialog box. For example, v4.master uses the “s4-notdlg” class for the Ribbon control to hide the ribbon within dialogs.

UPDATE (09/13/2010): There are times when a quick non-modal notification or a semi-permanent status message is more appropriate. Check out this post on how to leverage these new UI frameworks: http://www.pranavsharma.com/blog/2010/09/13/sharepoint-2010-notifications-statuses/

Tagged with:
 

One Response to How to leverage SharePoint 2010 dialogs?

  1. Robin says:

    Thanks mate! Just needed this ;)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Set your Twitter account name in your settings to use the TwitterBar Section.