Change Header Color of Modal Popup using jQuery

In this blog, I will show how to change header color of Model Popup and how to apply overlay effect.

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:

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

Here's the HTML Code:

<div id="DivToDisplayModelPopup" title="Upload Documents" style="display: none;">

Here's the  jQuery code:

var div = $("#DivToDisplayModelPopup");
div.dialog({
    modal: true,
    width: 750,
    height: 350,
    resizable: false,
    dialogClass: 'info'
});

I hope this would help developers & beginners. So start using and enjoy coding.