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