craveytrain/modal.html

## modal.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>modals</title>
	<link rel="stylesheet" href="style.css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="modal.js"></script>
	<noscript>
		<style>
			.modal {
				display: block;
				position: relative;
				top: auto;
				left: auto;
				margin-left: 0;
				width: auto;
			}
		</style>
	</noscript>
</head>
<body>
<p>This is text that <a href="#modal" class="trigger">will link</a> to the modal.</p>

<div id="modal" class="modal">
	<p>This is the modal, baby.</p>
	<a href="#" class="close">Back to top</a>
</div>

</body>
</html>

## modal.js
$(document).ready(function () {
	$('.trigger').click(function (e) {
		e.preventDefault();
		var id = $(this).attr('href').substring(1),
				$modal = $('#' + id),
				$backdrop = ($('#backdrop').length) ? $('#backdrop').show() : $('<div>', {id: 'backdrop'}).prependTo('body');

		$modal.show()
			.find('.close').text('close').click(function (e) {
				e.preventDefault();
				$('#backdrop').hide();
				$(this).closest('.modal').hide();
			})
		;
	});
});

## style.css
body {
	margin: 0;
}

.modal {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	background: #fff;
}

#backdrop {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title>modals</title>
	<link rel="stylesheet" href="style.css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="modal.js"></script>
	<noscript>
	<style>
	.modal {
	display: block;
	position: relative;
	top: auto;
	left: auto;
	margin-left: 0;
	width: auto;
	}
	</style>
	</noscript>
	</head>
	<body>
	<p>This is text that <a href="#modal" class="trigger">will link</a> to the modal.</p>

	<div id="modal" class="modal">
	<p>This is the modal, baby.</p>
	<a href="#" class="close">Back to top</a>
	</div>

	</body>
	</html>
	$(document).ready(function () {
	$('.trigger').click(function (e) {
	e.preventDefault();
	var id = $(this).attr('href').substring(1),
	$modal = $('#' + id),
	$backdrop = ($('#backdrop').length) ? $('#backdrop').show() : $('<div>', {id: 'backdrop'}).prependTo('body');

	$modal.show()
	.find('.close').text('close').click(function (e) {
	e.preventDefault();
	$('#backdrop').hide();
	$(this).closest('.modal').hide();
	})
	;
	});
	});
	body {
	margin: 0;
	}

	.modal {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	background: #fff;
	}

	#backdrop {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	}