Change Header Color of Modal Popup using jQuery

Introduction

jQuery modal popup is very familiar and popular modal popup used in client side script. I will show you how to change header color of modal popup and how to apply overlay effect (background blur effect).

The following is the CSS code:

  1. < style >   
  2.     .info.ui - widget - header {  
  3.         background#3c8dbc;color:# fff;  
  4.         font - family: Calibri;  
  5.     }  
  6.     .ui - widget - overlay {  
  7.         positionabsolute;  
  8.         top: 0;  
  9.         left: 0;  
  10.         width100 % ;  
  11.         height200 % ;  
  12.     }  
  13. < /style>  
Here's the HTML Code:
  1. <div id="DivToDisplayModelPopup" title="Upload Documents" style="display: none;">   
Here's the  jQuery code:
  1. var div = $("#DivToDisplayModelPopup");  
  2. div.dialog({  
  3.     modal: true,  
  4.     width750,  
  5.     height350,  
  6.     resizable: false,  
  7.     dialogClass: 'info'  
  8. });  
I hope this would help developers & beginners. So start using and enjoy coding.

 

Ebook Download
View all
Learn
View all