重构alert,confirm
最近写了一个重构的alert,confirm控件,调用时直接使用alert,confirm即可
//调用方法
alert("提示语")
window.confirm('你确定要删除该记录?',function(){
//回调函数
})
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 class="modal-wapper clearfix" id="alert"> <p class="align-right line30 clearfix"><span class="close">X</span></p> <p class="text font14 line20 pad10TB"></p> <p class="align-right top10"> <a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a> </p> </div> <!-- confirm弹框 --> <div class="modal-wapper clearfix" id="confirm"> <p class="align-right line30 clearfix"><span class="close">X</span></p> <p class="text font14 line20 pad10TB"></p> <p class="align-right top10"> <a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a> <a href="javascript:void(0)" class="btns btns-grey btns-small btnsCancel left20">取消</a> </p> </div>
js部分
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
//调用部分 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")) }); }) }; //模态对话框 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 class="tck-cover"></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) } };
追求原创特效