mahiya/SimpleModalPlugin.html

## SimpleModalPlugin.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8"></meta>
		<style>
			.modal-base {
			    display: none;
			    position: absolute;
			    opacity: 0;
			    top: 0;
			    left: 0;
			    height: 100%;
			    width: 100%;
			    background-color: #000;
			    opacity: 0.75;
			    z-index: 10000;
			}

			.modal {
			    display: none;
			    position: absolute;
			    opacity: 0;
			    top: 0;
			    left: 0;
				width: 400px;
			    z-index: 10001;
			    background-color: #fff;
			    border-radius: 5px;

				-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
				box-shadow: 0 5px 15px rgba(0,0,0,.5);
			}

			.modal div {
				padding: 10px 20px;
			}

			.modal-header{
				background: -webkit-gradient(linear, left top, left bottom, from(#187FC4), to(#0062AC));
				color: #fff;
			    border-radius: 5px 5px 0 0;
			}

			.modal .modal-body {
				padding: 20px 20px;
			}

			.modal-buttons {
				text-align:right;
			}

			.modal-buttons button {
				margin-left: 10px;
				width: 100px;
				height: 30px;
				border: none;
				background: -webkit-gradient(linear, left top, left bottom, from(#187FC4), to(#187FC4), color-stop(0.5, #1677B8));
				color: #fff;
				box-shadow: none;
			}

			.modal-buttons button:hover {
				background: #6C9BD2;
			}
		</style>
	</head>
	<body>
		<button id="btnModal">Show Modal</button>

		<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
		<script src="jquery.easing.1.3.js"></script>
		<script>
			$("#btnModal").click(function() {
				$.showModal("要素の削除", "選択した要素を削除しますか？", function() {
					console.log("OK Clicked");
				}, function() {
					console.log("Cancel Clicked");
				});
			});

			$.extend({
			    showModal: function (title, message, okCallback, cancelCallback) {
			        var modalBase = $('.modal-base');
			        if (modalBase.length == 0) {
			            modalBase = $('<div class="modal-base"></div>');
			            $('body').append(modalBase);
			        }
			        modalBase.click(function () {
						if(cancelCallback) {
							cancelCallback();
						}
			            $.hideModal();
			        });

					var modal = $('<div class="modal"></div>');
					modal.append($('<div class="modal-header">' + title + '</div>'));
					modal.append($('<div class="modal-body">' + message + '</div>'));
					modal.append(
						$('<div class="modal-buttons"></div>')
							.append(
								$('<button class="modal-button-cancel">Cancel</button>').click(function() {
									if(cancelCallback) {
										cancelCallback();
									}
			            			$.hideModal();
								})
							)
							.append(
								$('<button class="modal-button-ok">OK</button>').click(function() {
									if(okCallback) {
										okCallback();
									}
			            			$.hideModal();
								})
							)
					);
					$("html").append(modal);

			        modalBase.fadeIn(ModalEffectExtenstion.Duration / 4, function () {
			            var marginTop = -1 * (modal.height() / 2);
			            var marginLeft = -1 * (modal.width() / 2);
			            modal.css({
			                display: 'block',
			                left: '50%',
			                top: '50%',
			                marginTop: marginTop - ModalEffectExtenstion.MovePixel,
			                marginLeft: marginLeft,
			            }).animate({
			                marginTop: marginTop,
			                opacity: 1.0,
			            },
						ModalEffectExtenstion.Duration,
						ModalEffectExtenstion.Easing);
			        });
			    },
			    hideModal: function () {
					var modal = $(".modal");
			        modal.animate({
				            marginTop: -1 * (modal.height() / 2) - ModalEffectExtenstion.MovePixel,
				            opacity: 0,
			        },
					ModalEffectExtenstion.Duration / 2,
					ModalEffectExtenstion.Easing,
					function() {
						modal.remove();
					});
			        $(".modal-base").fadeOut(ModalEffectExtenstion.Duration / 4);
			    },
			});

			var ModalEffectExtenstion = {
				MovePixel: 25,
			    Duration: 1000,
			    Easing: "easeOutExpo",
			};
		</script>
	</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf8"></meta>
	<style>
	.modal-base {
	display: none;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.75;
	z-index: 10000;
	}

	.modal {
	display: none;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 400px;
	z-index: 10001;
	background-color: #fff;
	border-radius: 5px;

	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}

	.modal div {
	padding: 10px 20px;
	}

	.modal-header{
	background: -webkit-gradient(linear, left top, left bottom, from(#187FC4), to(#0062AC));
	color: #fff;
	border-radius: 5px 5px 0 0;
	}

	.modal .modal-body {
	padding: 20px 20px;
	}

	.modal-buttons {
	text-align:right;
	}

	.modal-buttons button {
	margin-left: 10px;
	width: 100px;
	height: 30px;
	border: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#187FC4), to(#187FC4), color-stop(0.5, #1677B8));
	color: #fff;
	box-shadow: none;
	}

	.modal-buttons button:hover {
	background: #6C9BD2;
	}
	</style>
	</head>
	<body>
	<button id="btnModal">Show Modal</button>

	<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script src="jquery.easing.1.3.js"></script>
	<script>
	$("#btnModal").click(function() {
	$.showModal("要素の削除", "選択した要素を削除しますか？", function() {
	console.log("OK Clicked");
	}, function() {
	console.log("Cancel Clicked");
	});
	});

	$.extend({
	showModal: function (title, message, okCallback, cancelCallback) {
	var modalBase = $('.modal-base');
	if (modalBase.length == 0) {
	modalBase = $('<div class="modal-base"></div>');
	$('body').append(modalBase);
	}
	modalBase.click(function () {
	if(cancelCallback) {
	cancelCallback();
	}
	$.hideModal();
	});

	var modal = $('<div class="modal"></div>');
	modal.append($('<div class="modal-header">' + title + '</div>'));
	modal.append($('<div class="modal-body">' + message + '</div>'));
	modal.append(
	$('<div class="modal-buttons"></div>')
	.append(
	$('<button class="modal-button-cancel">Cancel</button>').click(function() {
	if(cancelCallback) {
	cancelCallback();
	}
	$.hideModal();
	})
	)
	.append(
	$('<button class="modal-button-ok">OK</button>').click(function() {
	if(okCallback) {
	okCallback();
	}
	$.hideModal();
	})
	)
	);
	$("html").append(modal);

	modalBase.fadeIn(ModalEffectExtenstion.Duration / 4, function () {
	var marginTop = -1 * (modal.height() / 2);
	var marginLeft = -1 * (modal.width() / 2);
	modal.css({
	display: 'block',
	left: '50%',
	top: '50%',
	marginTop: marginTop - ModalEffectExtenstion.MovePixel,
	marginLeft: marginLeft,
	}).animate({
	marginTop: marginTop,
	opacity: 1.0,
	},
	ModalEffectExtenstion.Duration,
	ModalEffectExtenstion.Easing);
	});
	},
	hideModal: function () {
	var modal = $(".modal");
	modal.animate({
	marginTop: -1 * (modal.height() / 2) - ModalEffectExtenstion.MovePixel,
	opacity: 0,
	},
	ModalEffectExtenstion.Duration / 2,
	ModalEffectExtenstion.Easing,
	function() {
	modal.remove();
	});
	$(".modal-base").fadeOut(ModalEffectExtenstion.Duration / 4);
	},
	});

	var ModalEffectExtenstion = {
	MovePixel: 25,
	Duration: 1000,
	Easing: "easeOutExpo",
	};
	</script>
	</body>

	</html>