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>

调用部分的源代码（其中这里采用了freemarker标签引入modal.html，请按需自行选择引入方式）：

[#include "/WEB-INF/frame/frontFrame/modal.html"/]
<div class="inputcontent modal">
	<div style="text-align: center">
		<span class="orgname ff6400" style="font-size: 26px;"></span> 为您服务
	</div>
	<hr />
	<br />
	<h2>
		我的问题是这样的：
	</h2>
	<form method="post" id="ask_form">
		<div class="questiontitle">
			问题标题：
			<input type="text" class="inputbox" value="请输入您的问题标题" maxlength="50"
				name="title" onfocus="OnFocusFun(this,'请输入您的问题标题')"
				style="color: #999" onblur="OnBlurFun(this,'请输入您的问题标题')" />
			<span class="ff6400">*</span> 最多可以输入
			<span class="ff6400">50</span>个字符
		</div>
		<div class="detaileddescription">
			<label>
				详细描述：
			</label>
			<textarea rows="6" name="content" class="inputtextarea"></textarea>
		</div>
		<div class="questiontitle">
			<div class="agreediv">
				<input name="input" type="checkbox" class="checkbox" value=""
					checked="checked" />
				我同意《
				<a href="#">本平台的发布规则</a>》
			</div>
			详细描述最多可以输入
			<span class="ff6400">2000</span>个字符
			<input name="提 交" type="button" class="button-submit ask-submit"
				value="提 交" />
			<input name="取 消" type="button" class="button-register ask-cancel"
				value="取 消" />
			<input type="hidden" name="id" class="ask_id" />
		</div>
	</form>
</div>

<style type="text/css">
.modal {
	margin-left: -390px;/*该盒子宽度的一半，从而居中*/
	border-radius: 5px;
	padding: 20px 25px 45px 25px;
	height: 300px;
}
</style>

<script type="text/javascript">
$(function() {
	/**
	 * 咨询按钮
	 * @memberOf {TypeName} 
	 */
	$(".ask").click(function() {
		var $This=$(this);
		ActionBox.fadeIn(".modal", function() {
			$(".ask_id").val($This.attr("resourceid"));
			$(".orgname").text($This.attr("orgname"));
		});
	});
	 /**
	  * 提交按钮
	  */
	$(".ask-submit").click(
			function() {
				ActionBox.fadeOut(".modal", function() {
					$.post("${ctx}/front/Interaction/ask.htm", $("#ask_form")
							.serialize(), function(result) {
						ActionBox.msgBox( {
							title : "提示",
							msg : result
						});
					}, "html");
				});
			});
	 /**
	  * 取消按钮
	  */
	$(".ask-cancel").click(function() {
		ActionBox.fadeOut(".modal");
	});
});
</script>