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:

< 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.