Modal JQuery

by XcsN

HTML

<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">
    <div id="dialog" class="window"> <b>Testing of Modal Window</b> |
        <a href="#" class="close">Close it</a>

    </div>
    <div id="mask"></div>
</div>

CSS

#mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
}
#boxes .window {
    position:fixed;
    border: 5px black solid;
    background:aqua;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
}
/* Customize your modal window here, you can add background image too */
 #boxes #dialog {
    width:375px;
    height:203px;
}

JavaScript

$(document).ready(function () {
    $('a[name=modal]').click(function (e) {
        e.preventDefault();
        var id = $(this).attr('href');

        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });

        //transition effect        
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        $(id).fadeIn(2000);

    });

    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask, .window').hide();
    });

    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

    $('body').click(function (e) {
        taget = e.target;
        if ($(target) != $('.window')) $('.window').hide();
    })

});