java使用alert_[Java教程]重构alert，confirm

[Java教程]重构alert，confirm

0 2015-07-27 17:00:05

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

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部分

在页面底部增加代码

X

确定

X

确定

取消

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('

$(".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)

}

}

本文网址：http://www.shaoqun.com/a/128606.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0