最近寫了一個重構的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)} };

?

轉載于:https://www.cnblogs.com/wangmiao2606/p/4680594.html

總結

以上是生活随笔為你收集整理的重构alert，confirm的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。