github: https://github.com/tong-mikasa/msgbox-confirm
主要js代码,scss代码
(function($) { $.MsgBox = { Alert: function (title, msg, callback) { this._generateMsgboxHtml("alert", title, msg); //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "alter", title: title, msg: msg})); this._btnMsgOk(callback); }, Confirm: function (title, msg, callback,cancelCallback) { this._generateMsgboxHtml("confirm", title, msg); //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg})); this._btnMsgOk(callback); this._btnMsgNo(cancelCallback); }, CustomizeConfirm: function (title, msg, leftButtonText,rightButtonText,callback,cancelCallback) { this._generateMsgboxHtml("confirm", title, msg,leftButtonText,rightButtonText); //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg})); this._btnMsgOk(callback); this._btnMsgNo(cancelCallback); }, _tplMsgHtm: $("#tpl_confirm_msgbox").html(), _btnMsgOk: function(callback) { var that = this; $("#msg_btn_ok").click(function () { that._removeMsgboxPopupWrap(); if (callback && typeof (callback) == 'function') { callback(); } }); }, _btnMsgNo: function(cancelCallback) { var that = this; $("#msg_btn_no").click(function () { that._removeMsgboxPopupWrap(); if (cancelCallback && typeof (cancelCallback) == 'function') { cancelCallback(); } }); }, _generateMsgboxHtml: function (type, title, msg,leftButtonText,rightButtonText) { var okButtonText = (typeof leftButtonText == "undefined") ? '确定' : leftButtonText , noButtonText = (typeof rightButtonText == "undefined") ? '取消': rightButtonText; var strHtm ='<div class="confirm-msgbox-popup-wrap">' + ' <div class="confirm-mask-bg"></div>' + ' <div id="confirm_content_wrap">' + ' <div class="msg-in">' + ' <div id="msg_header" class="text-center">' + ' <span id="msg_title">'+title+'</span>' + ' </div>' + ' <div id="msg_msg" class="text-center">' + msg + '</div>' + ' <div id="msg_btn_wrap" class="text-center">'; if(type == "alert") { strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-full">'+okButtonText+'</span>'; } if(type == "confirm"){ strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-half">'+okButtonText+'</span>'; strHtm +='<span id="msg_btn_no" class="msg-btn cursor-point col-half">'+noButtonText+'</span>'; } strHtm +=' </div>' + ' </div>' + ' </div>' + ' </div>'; this._removeMsgboxPopupWrap(); $("body").append(strHtm); }, _removeMsgboxPopupWrap: function(){ $(".confirm-msgbox-popup-wrap").remove(); } }; })(jQuery); /* <script type="text/x-handlebars-template" id="tpl_confirm_msgbox"> <div class="confirm-msgbox-popup-wrap"> <div class="confirm-mask-bg"></div> <div id="confirm_content_wrap"> <div class="msg-in"> <div id="msg_header" class="text-center"> <span id="msg_title">{{title}}</span> </div> <div id="msg_msg" class="text-center"> {{msg}} </div> <div id="msg_btn_wrap" class="text-center"> {{#ifCond type '==' 'alert'}} <span id="msg_btn_ok" class="msg-btn cursor-point col-full">xxx</span> {{/if}} {{#ifCond type '==' 'confirm'}} <span id="msg_btn_ok" class="msg-btn cursor-point col-half">xxx</span> <span id="msg_btn_no" class="msg-btn cursor-point col-half">xxx</span> {{/ifCond}} </div> </div> </div> </div> </script> */
.confirm-msgbox-popup-wrap{ position: fixed; left: 0; top: 0; z-index: 9990; 100%; height: 100%; .col-full{ 100%; } .col-half{ 50%; } .cursor-point{ cursor: pointer; } .confirm-mask-bg{ position: absolute; z-index: 9991; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); } #confirm_content_wrap{ position: absolute; z-index: 9999; left: 50%; top: 50%; 400px; height: 250px; margin: -125px 0 0 -200px; .msg-in{ background: #ffffff; border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; } #msg_header{ padding-top: 15px; border-top-left-radius: inherit; border-top-right-radius: inherit; } #msg_title{ color: #333333; text-align: center; padding: 10px 0 10px; font-size: 20px; font-weight: bold; } #msg_msg{ color: #000000; padding: 20px; vertical-align: middle; font-size: 16px; line-height: 1.4; max-height: 100px; overflow-y: auto; } #msg_btn_wrap{ border-top: 1px solid #e6e6e5; } .msg-btn{ padding-top: 12px; padding-bottom: 12px; display: inline-block; font-size: 15px; color: #ffffff; border: none; border-right: 1px solid #e6e6e5; &:last-child{ border: none; } } #msg_btn_ok{ color: #0079FF; } #msg_btn_no{ color: rgba(0, 0, 0, 0.9); } } } @media screen and (max- 1000px) { .confirm-msgbox-popup-wrap{ #confirm_content_wrap{ left: 10%; right: 10%; auto; margin: -125px 0 0 0; #msg_title{ font-size: 30px; } #msg_msg{ padding: 30px; font-size: 28px; } .msg-btn{ padding-top: 20px; padding-bottom: 20px; font-size: 28px; } } } }