JavaScript封装弹框插件的方法_javascript技巧_

                                              弹窗             

* {   margin: 0;   padding: 0;   box-sizing: border-box; } .shade {   display: flex;   top: 0;   left: 0;   width: 100%;   height: 600px;   background-color: rgba(0, 0, 0, 0.5); } .shade .popwindows {   width: 400px;   height: 300px;   background-color: #f2f2f2;   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%);   display: flex;   flex-direction: column; } .shade .popwindows .tltle {   position: relative;   display: flex;   flex-direction: row;   align-items: center;   width: 100%;   flex: 1;   border-bottom: 1px solid #bdb8b8; } .shade .popwindows .tltle .text {   flex: 1;   float: left;   padding-left: 10px;   font-family: "微软雅黑"; } .shade .popwindows .tltle .exit {   width: 30px;   height: 30px;   background-image: url("../js学习/imag/cuohao.png");   background-repeat: no-repeat;   background-position: center center;   background-size: 20px auto;   float: right;   margin-right: 10px; } .shade .popwindows .content {   width: 100%;   flex: 3;   line-height: 40px;   font-size: 13px;   margin-left: 10px;   font-family: '宋体'; } .shade .popwindows .endbtn {   display: flex;   justify-content: center;   align-items: center;   width: 100%;   flex: 1;   border-top: 1px solid #bdb8b8; } .shade .popwindows .endbtn .btn{     width: 80px;     text-align: center;     height: 30px;     line-height: 30px;     font-size: 15px;     background-color: #979797; } .shade .popwindows .endbtn .btn:nth-child(1){     margin-right: 10px; } .shade .popwindows .endbtn .btn:nth-child(2){     margin-right: 10px; } .shade .popwindows .endbtn .btn:hover{     background-color: #f68c4e; }

                                            添加弹窗      

/*  var args = { title:"温馨提示", content:"是否添加一个页面生成一个蓝色div", confirmDivfn:function(){      var a = document.createElement("div");       a.style.backgroundColor = "red";       a.style.width = "100px";       a.style.height = "100px";       body.appendChild(a); }, cancelfn:function(){   body.removeChild(shade);   } } */ function Alert(args) {     var shade = document.createElement("div");     shade.className = "shade";     shade.innerHTML =       `             
             
                 
` +       args.title +       `
                 
             
             
` +       args.content +       `
             
                 
确定
                 
取消
             
             
             `;     document.body.appendChild(shade);     var cancel = document.querySelector(".btn.cancel");     var confirmDiv = document.querySelector(".btn.confirm");     confirmDiv.onclick = function() {       /* 此处输入确认事件的内容*/       args.confirmDivfn();       document.body.removeChild(shade);     };     cancel.onclick = function() {       /* 此处输入取消事件的内容 */       args.cancelfn();       document.body.removeChild(shade);     };   };