html实现confrim封装（PC）版本

弹窗confrim的简单封装

最近在做项目的时候发现公司根本就没有一点可以复用的代码就简单的封装了可以在pc端使用的confrim，话不多说直接上代码

//confrim弹窗
function confrims(opt) {
    let firmDom = document.getElementById("__conFirm")
    let title = opt.title ||"温馨提示",
        contentText = opt.contentText ||"", //提示框主题内容
        successBtnText = opt.successBtnTex || "确认", //确认按钮的字体
        successBtnBg = opt.successBtnBg ||"#F39A00",//确认按钮的背景颜色
        successBtnColor = opt.successBtnColor || "#ffffff",//确认按钮的字体颜色
        cancelBtnText = opt.cancelBtnText || "取消",//取消按钮的字体
        cancelBtnBg = opt.cancelBtnBg ||"#BCBCBC",//取消按钮的背景色
        cancelBtnColor = opt.cancelBtnColor || "#000000",//取消按钮的字体颜色

        btnSize = opt.btnSize || "14px";//提示窗按钮字体的大小

    if(firmDom){
        document.getElementById("__conFirm_bg").style.display="auto"
        firmDom.remove();
    }else{
        let firmBgDom = document.createElement("div");
        firmBgDom.setAttribute("id","__conFirm_bg");
        firmBgDom.style.cssText = "position: fixed;width:100%;height:100%;opacity:0.6;background-color:#000000; z-index:5; top:0;"
        document.getElementsByTagName('body')[0].appendChild(firmBgDom);
    }

    firmDom = document.createElement("div");
    firmDom.setAttribute("id","__conFirm");
    firmDom.style.cssText = "z-index:10; width:25%;  background-color:#ffffff; border-radius:8px; left:calc(50% - 12.5%); top:40%; position:fixed;"

    let titleDom = document.createElement("div");
    titleDom.style.cssText ="font-size: 18px;font-weight: bold;color: #000000;text-align: center;line-height: 60px;";
    titleDom.innerText = title;
    firmDom.appendChild(titleDom);

    let contDom = document.createElement("div");
    contDom.style.cssText = "text-align: left; padding: 20px 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;font-size: 14px; text-align:center;min-height: 100px;display: flex;justify-content: center;align-items: center; line-height: 22px;letter-spacing: 1px;";
    contDom.innerText = contentText;
    firmDom.appendChild(contDom);

    let btnBoxDom = document.createElement("div");
    btnBoxDom.style.cssText = "display: flex;align-items: center; justify-content: space-around;font-size:"+btnSize+"; line-height:35px; height: 70px;";

    let successBtnDom = document.createElement("div");
    successBtnDom.innerText = successBtnText;
    successBtnDom.setAttribute("id","__success_btn")
    successBtnDom.style.cssText =" width: 40%; background-color: "+successBtnBg+";  color:"+successBtnColor+"; border-radius: 5px;text-align: center; border: 1px solid "+successBtnBg+"; cursor: pointer; ";
    let cancelBtnDom = document.createElement("div");
    cancelBtnDom.innerText = cancelBtnText;
    successBtnDom.setAttribute("id","__cancel_btn")
    cancelBtnDom.style.cssText =" width: 40%; background-color: "+cancelBtnBg+";  color:"+cancelBtnColor+"; border-radius: 5px;text-align: center; border: 1px solid "+cancelBtnBg+";cursor: pointer;  ";


    btnBoxDom.appendChild(cancelBtnDom);
    btnBoxDom.appendChild(successBtnDom);

    firmDom.appendChild(btnBoxDom);

    document.getElementsByTagName('body')[0].appendChild(firmDom);


    successBtnDom.addEventListener("click",function () {
        document.getElementById("__conFirm_bg").style.display="none"
        opt.success();
        firmDom.remove();
    })
    cancelBtnDom.addEventListener("click",function () {
        document.getElementById("__conFirm_bg").style.display="none"
        opt.error();
        firmDom.remove();
    })

}

**PS:几乎所有的都是可配置的，遗憾就是没有做屏幕的兼容不过也差不多够用了，content不支持传dom不过你要是想使用dom的话只要把 contDom.innerText = contentText; 修改为 contDom.append(contentText) 或者你可以在完善一点判断一下传进来的是dom还是text并做相应的处理 我是太懒了因为这个足够我项目使用，so就懒得写了 **
大佬们可以忽略下面的内容 使用方法如下

 confrims({
            successBtnText:"是",
            cancelBtnTExt:"否",
            contentText: "检测到您还未设置密码，是否前往设置",
            success: function () {
                console.log("点击确认")
            },
            error: function () {
               console.log("点击取消")
            }
        })