Customising SharePoint2010 Modal Dialogs

First of all we discuss how the dialog framework works.

Well  SharePoint  uses Modal Dialogs for both 

• Taking input from the user.(as New Item / Edit Itms forms)
• Notifing end User that some processing is going on. so please wait.

For ease to work on these dialogs we are going to use OOB methods and feature present in SP.UI.ModalDialog Class.

Therefore dialog framework satisfies almost all the requirements that are related to functionality as we can use dialog for rendering *.aspx or *.html pages (weather an application page or ghostable page) , we can dinamically load usercontrols in it and even put html content in it directly as usually done before (when we were using jquery Modal dialog ) this is very important to consider when we are migrating our application from SP2007 to  SP2010. 

Besides the functionality requirements one more important thing that wants above all is the "Branding", for better UX and to make dialogs compatible with the whole application we have to modify the Title bar, Border and even Buttons. we can do all this by CSS only that supports all the browsers supported by SharePoint 2010.

For this put the include/overrides the following css classes in you style sheet now the OOB looks like (suites my branding):

---

/*sets the ui of the overlay (SP.UI.Modal Dialog)   */

.ms-dlgContent

{

    border: 1px solid #ebeced !important;

}

.ms-dlgBorder

{

    border: 1px solid #ebeced !important; 

}

.ms-dlgTitle

{

     background-color: #ebeced;

    background-image: none;

    vertical-align: middle;

    padding-bottom: 15px;

    border-bottom: 1px solid #b9b9ba; /*padding-left:12px;*/

}

.ms-dlgTitleText

{

    /*display: block;         font-weight: bold;         font-size: 13px;*/ /*color: #231F20;*/

    font-family: "proxima-nova-1" , "proxima-nova-2" ,sans-serif;

    font-style: normal;

    font-weight: 300;

    font-size: 20px !important;

    margin: 0px;

    padding-left: 15px; /* text-align :center;*/

    padding-top: 11px;

}

#dialogTitleSpan

{

    /* width: 580px !important;*/

}

.ms-dlgTitleBtns

{

    z-index: 9999;

    border: none;

    position: absolute;

    right: 15px;

    top: 14px; 

    background:url("/_layouts/1033/STYLES/Themable/Images/lightbox_close.png") #ebeced no-repeat 100% 0px;

     /* width:20px;         height:20px;*/

}

.ms-dlgTitleBtns:hover

{

    background:url("/_layouts/1033/STYLES/Themable/Images/lightbox_close.png") #ebeced no-repeat 100% -50px;

 /*  width:20px !important;         height:20px !important;*/

}

.ms-dlgCloseBtn span:hover

{

    border: none;

    background: none;

}

.ms-dlgTitleBtns img

{

    display: none;

}

/*END the ui of the overlay (SP.UI.Modal Dialog)   */

Posted in: JavaScript,SharePoint