用原生js加jq写的确认，取消弹框

• 效果图如下，默认弹框显示

1.png

  /**构造函数或者是class类
    * 弹框的逻辑，首先要创建一个div,里面有提示信息，确定，取消按钮
    * 点击取消按钮，隐藏弹框
    * 点击确定按钮，跳转或者执行某一个操作
    */
   (function(){
    function Test({title,content}){
        // 蒙版
        var box=document.createElement('div');
        box.setAttribute('class','box');
        box.style.cssText="width: 100%;height: 100%;display: flex; justify-content: center;align-items: center;background: rgba(0,0,0,.4);";
        // 中间的提示框
        var box_tan=document.createElement("div");
        box_tan.setAttribute('class','box_tan');
        box_tan.style.cssText="width:66%;height:auto; background: #ffffff;"
        box.append(box_tan);
        // 标题
        var tt=document.createElement("p");
        tt.setAttribute("class","title");
        tt.style.cssText=" text-align: center; margin:  2.66666667vw 0;font-size: 2.66666667vw;"
        tt.innerHTML=title;
        box_tan.appendChild(tt);
        //提示内容
        var con=document.createElement("p");
        con.setAttribute("class","con");
        con.style.cssText="text-align: center;font-size: 1.86666667vw;"
        if(con.length>20){
            con.cssText="min-width:80%; margin: 0 auto;"
        }
        con.innerHTML=content;
        box_tan.appendChild(con);
        // 取消，确定按钮
        var btn=document.createElement("p");
        btn.style.cssText=" margin-top: 4vw;font-size: 2.66666667vw; height:  8vw;line-height: 8vw;border-top: 0.13333333vw solid #ccc;  box-sizing: border-box;"
        btn.setAttribute("class","btn");
        var close=document.createElement('span');
        close.setAttribute("class","close");
        close.style.cssText=" display: inline-block; width: 49%;text-align: center;border-right: 0.13333333vw solid #ccc;"
        close.innerText="取消";
        btn.appendChild(close);

        var confim=document.createElement('span');
        confim.setAttribute("class","confirm");
        confim.style.cssText=" display: inline-block; width: 50%;text-align: center;"
        confim.innerText="确定";
        btn.appendChild(confim);
        box_tan.appendChild(btn);
        document.body.appendChild(box);

        this.confirm=function(b){//点击确定按钮，跳转到百度页面
            jq点击事件
            $(".confirm").click(function(){
               window.location.href=b;
            })
            原生js监听事件
            confim.addEventListener('click',function(){
                window.location.href=b;
            })
            //点击事件，跳转页面会报错
            // confim.onclick=function(b){
            //     // alert(b)
            //     window.location.href=b;
            // }
        }
        this.clos=function(){//点击取消按钮的时候，弹框隐藏hide(),删除节点remove()
            $(".close").click(function(){
                $(this).parents(".box").remove();
            })
        }
    }
   var a=new Test({
       title:"弹出框",
       content:"是否点击确认按钮，跳转到百度页面"
   });
   a.confirm('http://www.baidu.com');//点击确认按钮
   a.clos()//点击取消按钮
   })()

• 由于是第一次写，么有什么经验，哪位大佬可以指点一下，感觉写的有点low，想写成UI框架那种的，就是没有什么思路，求指点！！！

• 如果我直接将构造函数赋值给一个变量，那么要怎麽使用它，我下方的图片中可以进行使用，但是为神魔要用到prototype，希望知道的能解答一下！

2.png 3.png