Simple Jquery Dialog Box!

http://blog.kangrian.com

HTML

<button class='addCart'>Add to Cart</button>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
    This book has been added to your cart!
    <div class='close'>OK</div>
<div>

CSS

#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; 
    color:#222;
    background-color:#eee;
    border:8px solid #ccc;
    box-shadow: 0 0 2px 1px #666,0 0 10px #666;
    font:normal 12px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:center;
    border-radius:5px;
    z-index:1000;
    display:none;
}
.close {
    background:#444;
    color:#d9e0e9;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#333;
}
button {
    cursor:pointer;
}
#dialog-overlay {
    position:fixed !important;
    position:absolute;
    z-index:999;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:#000;
    display:none;
    opacity:.5;
}

JavaScript

$(function() {
     
     $('.addCart').click(function() {
          $('#dialog-box').fadeIn();
          $('#dialog-overlay').fadeIn();
          return false;
     });
     
     $('.close').click(function() {
          $('#dialog-box').slideUp();
          $('#dialog-overlay').fadeOut();
          return false;
     });
});