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;
width: 100%;
height: 100%;
.col-full{
width: 100%;
}
.col-half{
width: 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%;
width: 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-width: 1000px) {
.confirm-msgbox-popup-wrap{
#confirm_content_wrap{
left: 10%;
right: 10%;
width: 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;
}
}
}
}