This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <script src="https://code.jquery.com/jquery.js" type="text/javascript"></script> | |
| <style> | |
| /* 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; | |
| } | |
| </style> | |
| <script> | |
| $(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(); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- #dialog is the id of a DIV defined in the code below --> | |
| <a href="#dialog" name="modal">Click Me</a> | |
| <div id="boxes"> | |
| <!-- #customize your modal window here --> | |
| <div id="dialog" class="window"> | |
| <p> | |
| <img src="loading.gif" width="300px" height="90px" /> | |
| </p> | |
| <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> | |
| </body> | |
| </html> |
