Kcko · May 24, 2014 20:01
diff --git a/Easy Modal.html b/Easy Modal.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset='utf-8'>
 		<title>jQuery Modal Demo</title>
 		<style>
 			* {
 				margin:0; 
 				padding:0;
 			}

 			#overlay {
 				position:fixed; 
 				top:0;
 				left:0;
 				width:100%;
 				height:100%;
 				background:#000;
 				opacity:0.5;
 				filter:alpha(opacity=50);
 			}

 			#modal {
 				position:absolute;
 				background:url(tint20.png) 0 0 repeat;
 				background:rgba(0,0,0,0.2);
 				border-radius:14px;
 				padding:8px;
 			}

 			#content {
 				border-radius:8px;
 				background:#fff;
 				padding:20px;
 			}

 			#close {
 				position:absolute;
 				background:url(close.png) 0 0 no-repeat;
 				width:24px;
 				height:27px;
 				display:block;
 				text-indent:-9999px;
 				top:-7px;
 				right:-7px;
 			}
 		</style>
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 		<script>
 			var modal = (function(){
 				var 
 				method = {},
 				$overlay,
 				$modal,
 				$content,
 				$close;

 				// Center the modal in the viewport
 				method.center = function () {
 					var top, left;

 					top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
 					left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

 					$modal.css({
 						top:top + $(window).scrollTop(), 
 						left:left + $(window).scrollLeft()
 					});
 				};

 				// Open the modal
 				method.open = function (settings) {
 					$content.empty().append(settings.content);

 					$modal.css({
 						width: settings.width || 'auto', 
 						height: settings.height || 'auto'
 					});

 					method.center();
 					$(window).bind('resize.modal', method.center);
 					$modal.show();
 					$overlay.show();
 				};

 				// Close the modal
 				method.close = function () {
 					$modal.hide();
 					$overlay.hide();
 					$content.empty();
 					$(window).unbind('resize.modal');
 				};

 				// Generate the HTML and add it to the document
 				$overlay = $('<div id="overlay"></div>');
 				$modal = $('<div id="modal"></div>');
 				$content = $('<div id="content"></div>');
 				$close = $('<a id="close" href="#">close</a>');

 				$modal.hide();
 				$overlay.hide();
 				$modal.append($content, $close);

 				$(document).ready(function(){
 					$('body').append($overlay, $modal);						
 				});

 				$close.click(function(e){
 					e.preventDefault();
 					method.close();
 				});

 				return method;
 			}());

 			// Wait until the DOM has loaded before querying the document
 			$(document).ready(function(){

 				$.get('ajax.html', function(data){
 					modal.open({content: data});
 				});

 				$('a#howdy').click(function(e){
 					modal.open({content: "Hows it going?"});
 					e.preventDefault();
 				});
 			});
 		</script>
 	</head>
 	<body>
 		<a id='howdy' href='#'>Howdy</a>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>jQuery Modal Demo</title>
	<style>
	* {
	margin:0;
	padding:0;
	}

	#overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.5;
	filter:alpha(opacity=50);
	}

	#modal {
	position:absolute;
	background:url(tint20.png) 0 0 repeat;
	background:rgba(0,0,0,0.2);
	border-radius:14px;
	padding:8px;
	}

	#content {
	border-radius:8px;
	background:#fff;
	padding:20px;
	}

	#close {
	position:absolute;
	background:url(close.png) 0 0 no-repeat;
	width:24px;
	height:27px;
	display:block;
	text-indent:-9999px;
	top:-7px;
	right:-7px;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	var modal = (function(){
	var
	method = {},
	$overlay,
	$modal,
	$content,
	$close;

	// Center the modal in the viewport
	method.center = function () {
	var top, left;

	top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
	left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

	$modal.css({
	top:top + $(window).scrollTop(),
	left:left + $(window).scrollLeft()
	});
	};

	// Open the modal
	method.open = function (settings) {
	$content.empty().append(settings.content);

	$modal.css({
	width: settings.width \|\| 'auto',
	height: settings.height \|\| 'auto'
	});

	method.center();
	$(window).bind('resize.modal', method.center);
	$modal.show();
	$overlay.show();
	};

	// Close the modal
	method.close = function () {
	$modal.hide();
	$overlay.hide();
	$content.empty();
	$(window).unbind('resize.modal');
	};

	// Generate the HTML and add it to the document
	$overlay = $('<div id="overlay"></div>');
	$modal = $('<div id="modal"></div>');
	$content = $('<div id="content"></div>');
	$close = $('<a id="close" href="#">close</a>');

	$modal.hide();
	$overlay.hide();
	$modal.append($content, $close);

	$(document).ready(function(){
	$('body').append($overlay, $modal);
	});

	$close.click(function(e){
	e.preventDefault();
	method.close();
	});

	return method;
	}());

	// Wait until the DOM has loaded before querying the document
	$(document).ready(function(){

	$.get('ajax.html', function(data){
	modal.open({content: data});
	});

	$('a#howdy').click(function(e){
	modal.open({content: "Hows it going?"});
	e.preventDefault();
	});
	});
	</script>
	</head>
	<body>
	<a id='howdy' href='#'>Howdy</a>
	</body>
	</html>