阅读背景:

ActionBox 弹窗 弹消息 仿照bootstrap modal

来源:互联网 
modal部分的代码:
 
 
 
 
<style type="text/css">
._f_w {
	background-color: black;
	z-index: 1040;
	width: 100%;
	height: 100%;
	overflow: none;
	opacity: 0.8;
	-moz-opacity: 0.8; filter : alpha( opacity = 80);
	position: fixed;
	top: 0;
	left: 0;
	filter: alpha(opacity = 80);
}

._f_r {
	z-index: 1050;
	position: fixed;
	clear: both;
	border-radius: 5px;
	width: 200px;
	height: 100px;
	top: 100%;
	left: 100%;
	border: 3px solid #AAD9E8;
	background-color: white;
}

._f_r_title {
	height: 22px;
	border-bottom: 1px solid #AABBCC;
	text-align: center;
	line-height: 22px;
	font-weight: bolder;
	margin-bottom: 3px;
}

._f_r_btn {
	float: right;
	cursor: pointer;
}

.modal {
	z-index: 1050;
	position: fixed;
	top: -80%;
	left: 50%;
	clear: both;
}
</style>

<script type="text/javascript">
var ActionBox = (function($, box) {
	/**
	 * modal滑入
	 * @param {Object} selector 要滑入的modal
	 * @param {Object} fn 回调函数
	 */
	box.fadeIn = function(selector, fn) {
		//设置遮罩层
		$("<div class='_f_w'></div>").appendTo($("body")).fadeIn();
		var target = $(selector);
		target.animate( {
			top : "20%"
		}, "fast");
		if (fn) {
			fn();//执行回调函数
		}
	};

	/**
	 * modal滑出(消失)
	 * @param {Object} selector 要滑出的modal
	 * @param {Object} fn 回调函数
	 */
	box.fadeOut = function(selector, fn) {
		$(selector).animate( {
			top : "-80%"
		}, "normal");
		if (fn) {
			fn();//执行回调函数
		}

		//去除遮罩层
		var fadeWrapper = $("._f_w");
		fadeWrapper.fadeOut();
		setTimeout(function() {
			fadeWrapper.remove();
		}, 2000);
	};

	/**
	 * 显示消息窗口
	 * @param {Object} params={title:"提示",msg:"内容"}
	 */
	box.msgBox = function(params) {
		params = params || {};
		var title = params.title || "提示";
		var msg = params.msg || "";
		var resultBox = $('<div class="_f_r"><div class="_f_r_title"><strong style="float:left;">' + title + '</strong><b class="_f_r_btn">x </b></div><span style="padding: 3px;"></span></div>');
		resultBox.appendTo($("body")).find("span").text(msg);
		var boxTop = (1 - (resultBox.height() + 6) / $(window).height()) * 100
				+ "%";
		var boxLeft = (1 - (resultBox.width() + 8) / $(window).width()) * 100
				+ "%";
		resultBox.animate( {
			top : boxTop,
			left : boxLeft
		}, "slow").find("._f_r_btn").click(function() {
			resultBox.animate( {
				top : "100%",
				left : "100%"
			}, "slow");
		});
		//消息窗口延时消失
		setTimeout(function() {
			resultBox.animate( {
				top : "100%",
				left : "100%"
			}, "slow");
		}, 4000);
		//消息窗口延时删除
		setTimeout(function() {
			resultBox.remove();
		}, 8000);
	}
	return box;
})(jQuery, window.ActionBox || {});
</script><style type="text/css">
._f



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: