纯js代码弹窗操作
function bigPopup(data, click) {
var type = data.type;
var msg = data.msg;
var submsg = data.subMsg;
var cancelBtnWord = data.cancelBtnWord;
var confirmBtnWord = data.confirmBtnWord;
let clickHandler = click || $.noop;
let myClickHandler = function () {
$('#bigAlert').remove();
//错误或疑问时可进行回掉
if (type == "error" || type == "question") {
if (confirmBtnWord != null) {
clickHandler($(this).html() == confirmBtnWord);
}
}
};
let init = function () {
$bigAlert = $("<div id='bigAlert' style='width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;text-align: center;position:fixed;left:0;top:0;'></div>");
$myalert = $("<div id='myalert' style='text-align: center;width: 400px; height: 240px; background-color: rgb(255, 255, 255); box-shadow: rgba(3, 0, 0, 0.16) 0px 0px 16px 0px; z-index: 2; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -150px; overflow: hidden; display: block;'>").appendTo($bigAlert);
let $divclose = $("<div id='close' style='width: 100%; height: 32px;'></div>").appendTo($myalert);
let $imgclose = $("<img id='btn-close' src='static/image/popup/defultClose.png' style='margin:16px 0px 0px 360px;cursor: pointer;' onMouseOver=this.src='static/image/popup/floatClose.png' onmouseout=this.src='static/image/popup/defultClose.png' >").appendTo($divclose).click(myClickHandler);
let $divpictureContent = $("<div id='pictureContent' style='display:inline-block;margin-top: 10px;'>").appendTo($myalert);
// 根据type类型判断显示图片路径
let imgpath;
if (type == "success") {
imgpath = "static/image/popup/bigSuccess.png";
} else if (type == "error") {
imgpath = "static/image/popup/bigError.png";
} else if (type == "warring-1") {
imgpath = "static/image/popup/bigWarring1.png";
} else if (type == "warring-2") {
imgpath = "static/image/popup/bigWarring2.png";
} else if (type == "question") {
imgpath = "static/image/popup/bigQuestion.png";
}
let $picture = $("<img id='picture' src=" + imgpath + ">").appendTo($divpictureContent);
let $content = $("<div id='content' style='margin-top: 20px;'>").appendTo($myalert);
let $msg = $("<div id='msg' style='text-align: center; font-family: MicrosoftYaHei; font-size: 18px; font-weight: normal; font-stretch: normal;'>" + msg + "</div>").appendTo($content);
let $subMsg = $("<div id='subMsg' " +
"style='text-align: center; " +
"font-family: MicrosoftYaHei;" +
" font-size: 14px; " +
"font-weight: normal;" +
" letter-spacing: 0px;" +
" color: rgb(153, 153, 153);'>" + submsg + "</div>").appendTo($content);
let $buttonlist = $("<div id='buttonlist' style='margin-top: 20px;'>").appendTo($myalert);
//设置按钮内容(如果为警告,仅一个按钮)
if ((type == "warring-1" || type == "warring-2") && cancelBtnWord != null) {
$btnmid = $("<button type='button' id='btn-mid' " +
"style='width: 108px;" +
"height: 32px;" +
"background-color: #ffffff;" +
"border-style: solid;" +
"border-width: 1px;" +
"border-radius: 16px;" +
"border-color: #1da4fe;" +
"border-image-slice: 1;" +
"margin-left: 146px;" +
"font-family: MicrosoftYaHei;" +
"font-size: 16px;" +
"letter-spacing: 0px; + " +
"opacity: 0.8;" +
"cursor: pointer;" +
"color: #0099ff;'>" + cancelBtnWord + "</button>").appendTo($buttonlist).click(myClickHandler);
} else
//(如果为疑问)
if (type == "question") {
//设置内容
$btnquestionleft = $("<button id='btn-question-left' " +
"style='width: 108px" +
";height: 32px" +
";border-width: 0px;" +
"background-image: linear-gradient(90deg, #0fc1fc 0%, #1da4fe 100%),linear-gradient(#ffffff, #ffffff);" +
"border-radius: 16px;" +
"font-size: 16px;" +
"letter-spacing: 0px;" +
"color: #ffffff;" +
"margin-left: 86px;" +
"opacity: 0.8;" +
"cursor: pointer;" +
"float: left;'>" + confirmBtnWord + "</button>").appendTo($buttonlist).click(myClickHandler);
$btnquestionright = $("<button id='btn-question-right' " +
"style='width: 108px;" +
"height: 32px;" +
"background-color: #ffffff;" +
"border-style: solid;" +
"border-width: 1px;" +
"border-radius: 16px;" +
"border-color: #1da4fe;" +
"border-image-slice: 1;" +
"font-family: MicrosoftYaHei;" +
"font-size: 16px;" +
"letter-spacing: 0px;" +
"color: #0099ff;" +
"margin-left: 15px;" +
"opacity: 0.8;" +
"cursor: pointer;" +
"float: left;'>" + cancelBtnWord + "</button>").appendTo($buttonlist).click(myClickHandler);
}//其他情况,设置按钮内容
else {
$btnleft = $("<button id='btn-left' " +
"style='width: 108px;" +
"height: 32px;" +
"background-color: #ffffff;" +
"border-style: solid;" +
"border-width: 1px;" +
"border-radius: 16px;border-color: #1da4fe;" +
"border-image-slice: 1;" +
"margin-left: 86px;" +
"font-family: MicrosoftYaHei;" +
"font-size: 16px;" +
"letter-spacing: 0px;" +
"color: #0099ff;" +
"opacity: 0.8;" +
"cursor: pointer;" +
"float: left;'>" + cancelBtnWord + "</button>").appendTo($buttonlist).click(myClickHandler);
$btnright = $("<button class='bluebg1' id='btn-right' " +
"style='width: 108px;" +
"height: 32px;" +
"border-width: 0px;" +
"background-image: linear-gradient(90deg, #0fc1fc 0%, #1da4fe 100%),linear-gradient(#ffffff, #ffffff);" +
"border-radius: 16px;" +
"font-size: 16px;" +
"letter-spacing: 0px;" +
"color: #ffffff;" +
"margin-left: 15px;" +
"opacity: 0.8;" +
"cursor: pointer;" +
"float: left;'>" + confirmBtnWord + "</button>").appendTo($buttonlist).click(myClickHandler);
}
$("body").append($bigAlert);
};
init();
}
传入data参数：
let data = {
“type”: “question”,
“msg”: “操作成功”,
“subMsg”: “保存路径:C:\User\Administrator”,
“cancelBtnWord”: “知道了”,“confirmBtnWord”: “确定”
};
调用方式：
$(“button”).click(function(){
assessLoad(data,function(f){
if(f){
//业务操作 ，处理其他业务逻辑
window.open(“http://www.baidu.com”);
}
});
})
版权声明：本文为zch981964原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。