Modal Window

Modal window popup with absolute positioning and black transparent mask

HTML

<!-- #dialog is the id of a DIV defined in the code below -->
<button href="#dialog" name="modal" onClick=onClick(event)>Finance Calculator</button>

<div id="boxes">    
<div id="dialog" class="window">
        <h3>Mortgage Calculator</h3>
        <br /><br />
        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>
        
    </div>    <div id="mask"></div>
</div>

CSS

/* Z-index of #mask must lower than #boxes .window */
#mask {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index:9000;
    background-color:#000;
    display:none;
}

#boxes .window {
    position:fixed;
    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:250px;
    background: #fff;
}

JavaScript

onClick(e){
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

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

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });

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

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });

    //if mask is clicked
    $('#mask').click(function() {
        $(this).hide();
        $('.window').hide();
    });
   }