Create Beautiful Dialog Box with jQuery and Css3

Dialog box is an important element of a website and is used more if a website is dynamic. This box is used to show some alert messages to users. So the look of these boxes can also attract users and makes your website user friendly.

This is how this cool dialog box looks.

Demo  Download

HTML code: This is the HTML code for dialog box which will show on as popup box

<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
<a href="#" class="button">Close</a>
</div>
</div>

CSS code: I have shown you the html code of the box above. Now we will customize the look of the box with CSS. Change the CSS code according to the look of your website.

#dialog-overlay {

/* set it to fill the whil screen */
width:100%;
height:100%;

/* transparency for different browsers */
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000;

position:absolute;
top:0; left:0;
z-index:3000;

/* hide it by default */
display:none;
}

#dialog-box {

/* css3 drop shadow */
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

/* css3 border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

background:#eee;

width:328px;

/* make sure it has the highest z-index */
position:absolute;
z-index:5000;

/* hide it by default */
display:none;
}

#dialog-box .dialog-content {
/* style the content */
text-align:left;
padding:10px;
margin:13px;
color:#666;
font-family:arial;
font-size:11px;
}

a.button {
/* styles for button */
margin:10px auto 0 auto;
text-align:center;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;

/* button color */
background-color: #e33100;

/* css3 implementation */
/* rounded corner */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

/* drop shadow */
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

/* text shaow */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;

}

a.button:hover {
background-color: #c33100;
}

/* extra styling */
#dialog-box .dialog-content p {
font-weight:700; margin:0;
}

#dialog-box .dialog-content ul {
margin:10px 0 10px 20px;
padding:0;
height:50px;
}

JavaScript code: Now the dialog box is ready and you need to call it via some event.

$(document).ready(function () {

$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});

$(window).resize(function () {

//only do it if the dialog box is not hidden
if (!$('#dialog-box').is(':hidden')) popup();
});

});

//Popup dialog
function popup(message) {

// get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);

// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

// display the message
$('#dialog-message').html(message);

}

 

Demo  Download