Modal Window

Modal window popup with absolute positioning and black transparent mask

by J. Jones

HTML

<a href="#modalPopupDialog" name="launchModalDialogLink">launch modal dialog</a>

<!--<div id="boxes"><!-- this div hides the dialog until it is launched -->
    <div id="modalPopupDialog" class="modalwindow">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <form>
            <input type="text" name="mcPrice" id="mcPrice" value="" class="mortgageField" />Sale price ($)
            <br/>
            <input type="text" name="mcDown" id="mcDown" class="mortgageField" />Down payment (%)
            <br/>
            <input type="text" name="mcRate" id="mcRate" class="mortgageField" />Interest Rate (%)
            <br/>
            <input type="text" name="mcTerm" id="mcTerm" class="mortgageField" />Term (years)
            <br/>
            <button class="smallButton" id="modalDialogButton" onclick="return false">Do this Thing!</button>
            <br/>
            <input type="text" name="mcPayment" id="mcPayment" class="mortgageAnswer" />
        </form>
        <br />
    </div>
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
    <div id="mask"></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;
}
.modalwindow {
  display:none;
    position:fixed;
    width:375px;
    height:150px;
    background: #fff;
    padding:20px;
    z-index:9999;
}
#boxes #modalPopupDialog {
    width:375px;
    height:250px;
    background: #fff;
}
.close {
    -webkit-appearance: none;
    float:right;
    font-size:20px;
    font-weight:bold;
    line-height:20px;
}

JavaScript

$(document).ready(function () {
    $("#modalDialogButton").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;
    });

    //select all the a tag with name equal to modal
    $('a[name=launchModalDialogLink]').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
    $('.modalwindow .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .modalwindow').hide();
    });

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

});