Jquery ModelPop Header Color CSS

Introduction

JQuery modelpopup is very familer and popular modelpopup using in clientside script . In this i will show how to change header color of Modelpopup and how to apply overlay effect(background blur effect).

Below is the CSS code :

<style>
        .info .ui-widget-header // header color CSS
        {
            background: #3c8dbc;
            color: #fff;
            font-family: Calibri;
        }
        .ui-widget-overlay //Overlay effect (background blur effect) CSS
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200%;
        }
</style>

Below is the HTML Code:

<html>
   <head>
      <body>
         <div id="DivToDisplayModelPopup" title="Upload Documents" style="display: none;">
      </body>
   </head>
</html>

Below is the Jquery code :

var div = $("#DivToDisplayModelPopup");
div.dialog({

   modal: true,

   width: 750,

   height: 350,

   resizable: false,

   dialogClass: 'info' // apply css name for Header CSS.

});