ModalExtentionバージョン2

ModalExtentionPt2.js

$.extend({
	modal : function(title, message, okCallback, options) {
		
		var modalBack = $('<div style="background-color:#000;opacity:0;position:absolute;top:0;left:0;z-index:10000;"/></div>');
		modalBack.width($(document).width());
		modalBack.height($(document).height());
		modalBack.click(function() {
			ModalExtention.Hide(modal, modalBack);
		});
		var modalClass = options.modalClass == null ? "" : options.modalClass;
		var modal = $('<div class="modal ' + modalClass + '" style="opacity:0;position:absolute;top:50%;left:50%;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);min-width:400px;"/></div>');
		var modalHeader = $('<div class="modal-header" style="padding:10px;background-color:#0882d0;color:#fff;border-radius: 5px 5px 0 0;">' + title + '</div>');
		var modalBody = $('<div class="modal-body" style="padding:10px;">' + message + '</div>');
		var modalButtons = $('<div class="modal-buttons" style="text-align: right;padding:10px;"></div>');					
		if(okCallback) {
			var cancelButton = $('<button style="margin-right:10px;width:100px;height:30px;background-color:#0882d0;color:#fff;border:none;">キャンセル</button>');
			cancelButton.click(function() {
				ModalExtention.Hide(modal, modalBack);
			});
			modalButtons.append(cancelButton);
		}
		var okButton = $('<button style="width:100px;height:30px;background-color:#0882d0;color:#fff;border:none;">OK</button>');
		okButton.click(function() {
			if(okCallback){
				okCallback();
			}
			ModalExtention.Hide(modal, modalBack);
		});
		modalButtons.append(okButton);
		modal.append(modalHeader);
		modal.append(modalBody);
		modal.append(modalButtons);

		$("html").append(modalBack);
		$("html").append(modal);

		modal.css({
		    marginTop: -1 * (modal.height() / 2) - ModalExtention.AnimationMovingPixel,
		    marginLeft: -1 * (modal.width() / 2),
		});
							
		ModalExtention.Show(modal, modalBack);
	}
});
var ModalExtention = {
	ImageHeight: "75%",
	AnimationEasing: "easeOutExpo",
	AnimationDuration: 500,
	AnimationMovingPixel: 10,
	DisplayingDuration: 2000,
	Show: function(modal, modalBack) {	
		modalBack.animate({
			opacity: 0.75,
		}, 
		ModalExtention.AnimationDuration/2, 
		ModalExtention.AnimationEasing,
		function() {
			modal.animate({
		    	marginTop: -1 * (modal.height() / 2),
				opacity: 1.0,
			}, 
			ModalExtention.AnimationDuration,
			ModalExtention.AnimationEasing);
		});
	},
	Hide: function(modal, modalBack) {	
		modalBack.animate({
			opacity: 0,
		}, 
		ModalExtention.AnimationDuration/2, 
		ModalExtention.AnimationEasing,
		function() {
			modalBack.remove();
		});
		
		modal.animate({
	    	marginTop: -1 * (modal.height() / 2) - ModalExtention.AnimationMovingPixel,
			opacity: 0,
		}, 
		ModalExtention.AnimationDuration,
		ModalExtention.AnimationEasing, function() {
			modal.remove();
		});
	},
};