纯js代码封装弹窗操作

纯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”);
}
});
})