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. position: absolute;
  8. top: 0;
  9. left: 0;
  10. width: 100 % ;
  11. height: 200 % ;
  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. width: 750,
  5. height: 350,
  6. resizable: false,
  7. dialogClass: 'info'
  8. });
I hope this would help developers & beginners. So start using and enjoy coding.