你的位置:首页 > Java教程

[Java教程]重构alert,confirm


最近写了一个重构的alert,confirm插件,调用时直接使用alert,confirm即可

css部分

引入我写的一个基础样式

<link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css" />

.tck-cover{ width:100%; height:100%; position: fixed; top:0; left:0; z-index:1000; background-color:rgba(0,0,0,0.6); display:none;}
.modal-wapper{ width:340px; padding:20px; position:fixed; top:-200%; left:50%; box-shadow:0 0 5px rgba(0,0,0,0.5); z-index:100001; background-color:#fff; border-radius:5px;}

 

html部分

在页面底部增加代码

<!-- alert弹框 -->
<div id="alert">
<p ><span >X</span></p>
<p ></p>
<p >

<a href="javascript:void(0)" >确定</a>
</p>
</div>
<!-- confirm弹框 -->
<div id="confirm">
<p ><span >X</span></p>
<p ></p>
<p >
<a href="javascript:void(0)" >确定</a>
<a href="javascript:void(0)" >取消</a>
</p>
</div>

js部分

//重构部分

window.alert = function (msg) {
modal.modal($("#alert"),$(".close,#alert .btnsConfirm"),function(){
$("#alert .text").html(msg);
})
}
window.confirm = function (msg,callBack) {
modal.modal($("#confirm"),$(".close,#confirm .btnsCancel"),function(){
$("#confirm .text").html(msg);
$("#confirm .btnsConfirm").on("click",function(){
callBack();
modal.hide($("#confirm"))
});

})
}

//模态框 jquery

var modal = {
modal:function(b,c,callback){
$(".modal-wapper").css({"top":"-200%"});
b.css({"margin-left":-b.width()/2})
b.animate({"top":"20%"},200);
$(".tck-cover").fadeIn();
if($(".tck-cover").length==0){
$("body").append('<div ></div>');
$(".tck-cover").fadeIn();
};
$(document).on("click",".tck-cover",function(){
modal.hide(b);
})
if(c){
c.click(function(){
modal.hide(b);
});
}
if(callback){callback()}
},
hide:function(b){
b.animate({"top":"-200%"},200);
$(".tck-cover").fadeOut(200);
setTimeout(function(){$(".tck-cover").remove();},200)
}
}