View the Page in the Sharepoint Modal Dialog with Branding/Styling

Jun 18, 2012 at 10:03 PM


In this article, I will explain how to open a page in a Sharepoint 2010 Modal Dialog box. Something like this,



But the first Question is Why use Sharepoint 2010 modal dialog ?


Why ?
  • Reduces the scrolling on the page, if you have a complex custom form which requires lot of input data
  • Ease to use
  • Avoid Redirection of pages
  • Provides details/form on a single screen
How ?
 
It can be used with a simple Javscript code. Below is the code snippet.
 
<script type="text/javascript">
 
function openModalURL(url, title, width, height, callbackType, isMax) {
        var opmlPath = GetSelectedNode();
        var options = SP.UI.$create_DialogOptions();
        options.url = url;
        options.title = title;
        options.width = width;
        options.height = height;
        options.showMaximized = isMax;
        if (callbackType == 'NotificationCallback') {
            options.dialogReturnValueCallback = NotificationCallback;
        }
        else if (callbackType == 'SilentCallback') {
            options.dialogReturnValueCallback = SilentCallback;
        }
        else if (callbackType == 'RefreshCallback') {
            options.dialogReturnValueCallback = RefreshCallback;
        }
        SP.UI.ModalDialog.showModalDialog(options);
    }
function NotificationCallback(dialogResult, returnValue) {
 
        if (dialogResult == SP.UI.DialogResult.OK) {
            SP.UI.Notify.addNotification('Operation succeeded'false);
        }
        else if (dialogResult == SP.UI.DialogResult.cancel) {
            SP.UI.Notify.addNotification('Operation cancelled'false);
        }
        else if (dialogResult == SP.UI.DialogResult.invalid) {
            SP.UI.Notify.addNotification('Operation invalid'false);
        }
    }
    function SilentCallback(dialogResult, returnValue) {
 
    }
    function RefreshCallback(dialogResult, returnValue) {
        location.reload(true);
    }
script>

All you have to do is to call this function on the ClientClick event of your button.
 
Like this,
 
<asp:Button ID="btnOpenDialog" Text="Open Dialog" runat="server"                                OnClientClick="javascript:openModalURL('../Sitepages/DialogExample.aspx','Sample Dialog', 400, 250, 'SilentCallback','false'); return false;" />
 
In the above example I have specified three types of Callback option on the close event of the modal dialog
  1. NotificationCallback - This will notify the user on the landing page using the notification on the notification bar based on the action taken by user.
  2. SilentCallback - This will silently close the modal Dialog box without doing anything on the parent page.
  3. RefreshCallback - This option will refresh the page when the Dialog box is closed.
You can explore more options for the modal dialog over here.
 
Now the Branding/Styling part,
 
Most of the styling of modal dialog are controlled by following classes. You can view it using IE Developer Toolbar
 
 
I have modified the basic styling to make it suitable to stylesheet of my site.
 
<style type="text/css">
    .ms-dlgOverlay
    {
        background-color#676767
    }
    .ms-dlgContent
    {
        border0;
    }
    .ms-dlgBorder
    {
        border1px solid #0087C1;
    }
    .ms-dlgTitle
    {
        background-color#0087C1;
    }
    .ms-dlgTitleText
    {
        displayblock;
        font-weightbold;
        font-size13px;
        padding7px;
    }
style>
 
 
I Hope this article was informative. Happy Sharepointing !

Please do Share/Like/Comment if this article was helpful.
 

Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus