Modal Window

Modal window popup with absolute positioning and black transparent mask

by Leonardo Trimarchi

HTML

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

<div id="boxes">
    
    
    <!-- #customize your modal window here -->
    
    <div id="dialog" class="window">
        <h3>Mortgage Calculator</h3>
        <form>
            <p><input type="text" name="mcPrice" id="mcPrice" value="" class="mortgageField" /> Sale price ($)</p>
            <p><input type="text" name="mcDown" id="mcDown" class="mortgageField" /> Down payment (%)</p>
            <p><input type="text" name="mcRate" id="mcRate" class="mortgageField" /> Interest Rate (%)</p>
            <p><input type="text" name="mcTerm" id="mcTerm" class="mortgageField" /> Term (years)</p>
            <button class="smallButton" id="mortgageCalc" onclick="return false">Calculate Monthly Payment</button> <input type="text" name="mcPayment" id="mcPayment" class="mortgageAnswer" />
        </form>
        <script type="text/javascript">
            $("#mortgageCalc").click(function(){ 
            var L,P,n,c,dp; 
            L = parseInt($("#mcPrice").val()); 
            n = parseInt($("#mcTerm").val()) * 12; 
            c = parseFloat($("#mcRate").val())/1200; 
            dp = 1 - parseFloat($("#mcDown").val())/100; 
            L = L * dp; 
            P = (L*(c*Math.pow(1+c,n)))/(Math.pow(1+c,n)-1); 
            if(!isNaN(P)) 
            { 
            $("#mcPayment").val(P.toFixed(2)); 
            } 
            else 
            { 
            $("#mcPayment").val('There was an error'); 
            } 
            return false; 
            }); 
        </script>
        <br /><br />
        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>
        
    </div>
    
    
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <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

$(document).ready(function() {

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(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();
    });

});