jtarleton · June 3, 2013 15:46
diff --git a/index.html b/index.html
 <!doctype html>
 <head>
 <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
 <script src="modal.js"></script>
 <style type="text/css">
 #mask{
    position:absolute; /* important */
    top:0px; /* start from top */
    left:0px; /* start from left */
    height:100%; /* cover the whole page */
    width:100%;
    display:none; /* don't show it '*/

    background-color: black;
 }

 .modal_window{
    position:absolute; /* important so we can position it on center later */
    display:none; /* don't show it */
 }

 /* style a specific modal window  */
 #modal_window
 {
    width:400px;
    height:400px;
    padding:50px;
    border:1px solid #696969;
    background: #FFF;
    color:#696969;
 }
 a#closex {
    color:#696969;
    background-color: transparent;
    position: absolute;
    right: 0px; top: 0px; width:auto;
    margin-top:0px; margin-right:0px;
    padding:5px;
    cursor:pointer;
 }
 a#closex:hover {
    color:red;
 }
 </style>
 </head>
 <body>
  <h1>Modal Window</h1>
 	<p>In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.</p>
 	<p>Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use.[1] Modal windows are prone to produce mode errors.</p>
 	<p>Source: <a href="http://en.wikipedia.org/wiki/Modal_window">http://en.wikipedia.org/wiki/Modal_window</a></p>
 	<p>Sed vel augue vitae ipsum scelerisque vestibulum. Curabitur semper felis aliquam felis suscipit ut dapibus tellus semper. Donec congue porta hendrerit. Mauris sed sem sed eros consequat ullamcorper ut ut lectus. Aliquam lorem leo, placerat non fringilla eu, vehicula sed nulla. Duis et libero consequat ante adipiscing gravida. Aenean ut ipsum nunc, eget viverra elit. Fusce id diam orci, et pretium eros. Praesent vitae venenatis mauris. Suspendisse fermentum semper ante id molestie. Nam elementum blandit purus, nec sollicitudin dolor volutpat in.</p>
 	<p>Morbi ullamcorper odio in urna malesuada ultrices. Mauris lorem lacus, commodo eget fermentum ac, laoreet non enim. Etiam odio elit, vestibulum in bibendum quis, molestie ut purus. Etiam pretium, ante sed lobortis aliquam, erat metus varius risus, a fermentum ipsum erat quis justo. Nam velit erat, aliquam sit amet pellentesque ornare, imperdiet ullamcorper mi. Nunc vitae mauris est, et feugiat mauris. Nulla in magna mattis turpis cursus placerat. Phasellus bibendum nunc ac orci cursus sed ultricies neque fringilla.</p>
 	<p>Morbi vitae libero dolor, a aliquam neque. Aliquam venenatis massa at nunc viverra facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla bibendum erat sed fermentum. Nunc sollicitudin, arcu eget vehicula sagittis, nisl elit volutpat dui, id tempor risus metus at quam. Mauris ac ipsum vitae nibh pharetra imperdiet. Maecenas id porta velit. Phasellus id iaculis ipsum. Aenean a ante tortor. Mauris ipsum nisi, bibendum vulputate varius ac, commodo sit amet nunc. Integer auctor scelerisque cursus. Vestibulum tempus aliquam pharetra.</p>
  <p><button class='activate_modal' name='modal_window'>Show modal window</button></p>
  
  <div id='mask' class='close_modal'></div>
  
  <div id='modal_window' class='modal_window'>
    <a id="closex">Close</a>
    <p>My modal window</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis erat dapibus enim consectetur scelerisque. Ut eget orci turpis. Aenean justo ante, vehicula at semper in, imperdiet et sem. Aenean pretium suscipit tempus. Nullam fermentum mi imperdiet enim convallis pulvinar. Ut vel metus eu lacus vehicula ultrices nec et sapien. Vivamus semper viverra aliquam. Maecenas ac euismod est. Aenean venenatis lorem vitae neque vulputate commodo. Cras eget semper lorem. Nam cursus arcu at metus lobortis dictum. </p>
    <p>Cras urna tellus, iaculis eget luctus vitae, vulputate eget arcu. Curabitur ultricies dictum libero, et accumsan nibh suscipit in. Nunc vitae metus ut quam suscipit fermentum. Curabitur eu sapien velit.</p>
  </div>
 </body>
 </html>
diff --git a/modal.js b/modal.js
 /* modal.js */
 function closeMe()
 {
    //hide the mask
    jQuery('#mask').fadeOut(500);

    //hide modal window(s)
    jQuery('.modal_window').fadeOut(500);
 }

 function showMe(modal_id)
 {
    //set display to block and opacity to 0 so we can use fadeTo
    jQuery('#mask').css({ 'display' : 'block', opacity : 0 });

    //fade in the mask to opacity 0.9
    jQuery('#mask').fadeTo(500, 0.9);

     //show the modal window
    jQuery('#'+modal_id).fadeIn(500);

    jQuery('#closex').unbind('click').bind('click',function(){
        closeMe();
    });

 }

 jQuery(document).ready(function(){

    // get the height and width of the page
    var window_width = jQuery(window).outerWidth(false);
    var window_height = jQuery(window).outerHeight(false);


    // vertical and horizontal centering of modal window(s)

    // we will use each function so if we have more then 1
    // modal window we center them all

    jQuery('.modal_window').each(function(){

        // get the height and width of the modal
        var modal_height = jQuery(this).outerHeight(false);
        var modal_width  = jQuery(this).outerWidth(false);



        // calculate top and left offset needed for centering
        var top = (window_height-modal_height) / 2;
        var left = (window_width-modal_width) / 2;

        // apply new top and left css values
        jQuery(this).css({'top' : top , 'left' : left});

    });


    jQuery('.activate_modal').unbind('click').bind('click', function(e){
        e.preventDefault();
    //the clicked element's NAME attribute will correspond to the ID of the modal window to be displayed
 		showMe(jQuery(this).attr('name'));
    });

    jQuery('.close_modal').unbind('click').bind('click',function(){
        closeMe();
    });
 });
	<!doctype html>
	<head>
	<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
	<script src="modal.js"></script>
	<style type="text/css">
	#mask{
	position:absolute; /* important */
	top:0px; /* start from top */
	left:0px; /* start from left */
	height:100%; /* cover the whole page */
	width:100%;
	display:none; /* don't show it '*/

	background-color: black;
	}

	.modal_window{
	position:absolute; /* important so we can position it on center later */
	display:none; /* don't show it */
	}

	/* style a specific modal window */
	#modal_window
	{
	width:400px;
	height:400px;
	padding:50px;
	border:1px solid #696969;
	background: #FFF;
	color:#696969;
	}
	a#closex {
	color:#696969;
	background-color: transparent;
	position: absolute;
	right: 0px; top: 0px; width:auto;
	margin-top:0px; margin-right:0px;
	padding:5px;
	cursor:pointer;
	}
	a#closex:hover {
	color:red;
	}
	</style>
	</head>
	<body>
	<h1>Modal Window</h1>
	<p>In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.</p>
	<p>Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use.[1] Modal windows are prone to produce mode errors.</p>
	<p>Source: <a href="http://en.wikipedia.org/wiki/Modal_window">http://en.wikipedia.org/wiki/Modal_window</a></p>
	<p>Sed vel augue vitae ipsum scelerisque vestibulum. Curabitur semper felis aliquam felis suscipit ut dapibus tellus semper. Donec congue porta hendrerit. Mauris sed sem sed eros consequat ullamcorper ut ut lectus. Aliquam lorem leo, placerat non fringilla eu, vehicula sed nulla. Duis et libero consequat ante adipiscing gravida. Aenean ut ipsum nunc, eget viverra elit. Fusce id diam orci, et pretium eros. Praesent vitae venenatis mauris. Suspendisse fermentum semper ante id molestie. Nam elementum blandit purus, nec sollicitudin dolor volutpat in.</p>
	<p>Morbi ullamcorper odio in urna malesuada ultrices. Mauris lorem lacus, commodo eget fermentum ac, laoreet non enim. Etiam odio elit, vestibulum in bibendum quis, molestie ut purus. Etiam pretium, ante sed lobortis aliquam, erat metus varius risus, a fermentum ipsum erat quis justo. Nam velit erat, aliquam sit amet pellentesque ornare, imperdiet ullamcorper mi. Nunc vitae mauris est, et feugiat mauris. Nulla in magna mattis turpis cursus placerat. Phasellus bibendum nunc ac orci cursus sed ultricies neque fringilla.</p>
	<p>Morbi vitae libero dolor, a aliquam neque. Aliquam venenatis massa at nunc viverra facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla bibendum erat sed fermentum. Nunc sollicitudin, arcu eget vehicula sagittis, nisl elit volutpat dui, id tempor risus metus at quam. Mauris ac ipsum vitae nibh pharetra imperdiet. Maecenas id porta velit. Phasellus id iaculis ipsum. Aenean a ante tortor. Mauris ipsum nisi, bibendum vulputate varius ac, commodo sit amet nunc. Integer auctor scelerisque cursus. Vestibulum tempus aliquam pharetra.</p>
	<p><button class='activate_modal' name='modal_window'>Show modal window</button></p>

	<div id='mask' class='close_modal'></div>

	<div id='modal_window' class='modal_window'>
	<a id="closex">Close</a>
	<p>My modal window</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis erat dapibus enim consectetur scelerisque. Ut eget orci turpis. Aenean justo ante, vehicula at semper in, imperdiet et sem. Aenean pretium suscipit tempus. Nullam fermentum mi imperdiet enim convallis pulvinar. Ut vel metus eu lacus vehicula ultrices nec et sapien. Vivamus semper viverra aliquam. Maecenas ac euismod est. Aenean venenatis lorem vitae neque vulputate commodo. Cras eget semper lorem. Nam cursus arcu at metus lobortis dictum. </p>
	<p>Cras urna tellus, iaculis eget luctus vitae, vulputate eget arcu. Curabitur ultricies dictum libero, et accumsan nibh suscipit in. Nunc vitae metus ut quam suscipit fermentum. Curabitur eu sapien velit.</p>
	</div>
	</body>
	</html>
	/* modal.js */
	function closeMe()
	{
	//hide the mask
	jQuery('#mask').fadeOut(500);

	//hide modal window(s)
	jQuery('.modal_window').fadeOut(500);
	}

	function showMe(modal_id)
	{
	//set display to block and opacity to 0 so we can use fadeTo
	jQuery('#mask').css({ 'display' : 'block', opacity : 0 });

	//fade in the mask to opacity 0.9
	jQuery('#mask').fadeTo(500, 0.9);

	//show the modal window
	jQuery('#'+modal_id).fadeIn(500);

	jQuery('#closex').unbind('click').bind('click',function(){
	closeMe();
	});

	}

	jQuery(document).ready(function(){

	// get the height and width of the page
	var window_width = jQuery(window).outerWidth(false);
	var window_height = jQuery(window).outerHeight(false);


	// vertical and horizontal centering of modal window(s)

	// we will use each function so if we have more then 1
	// modal window we center them all

	jQuery('.modal_window').each(function(){

	// get the height and width of the modal
	var modal_height = jQuery(this).outerHeight(false);
	var modal_width = jQuery(this).outerWidth(false);



	// calculate top and left offset needed for centering
	var top = (window_height-modal_height) / 2;
	var left = (window_width-modal_width) / 2;

	// apply new top and left css values
	jQuery(this).css({'top' : top , 'left' : left});

	});


	jQuery('.activate_modal').unbind('click').bind('click', function(e){
	e.preventDefault();
	//the clicked element's NAME attribute will correspond to the ID of the modal window to be displayed
	showMe(jQuery(this).attr('name'));
	});

	jQuery('.close_modal').unbind('click').bind('click',function(){
	closeMe();
	});
	});