原生js弹窗-自制插件

2024-02-15 12:22:58

最近有个老移动端项目
以前是从安卓外壳内弹出弹窗进行交互，现在需要更换外壳，可以使用H5尽量使用H5，因为这个弹窗又许多地方需要调用所以我写了一个公用js和css，只需要将其引入到页面即可直接调用，不需要增加新的dom，几乎兼容所有浏览器
下面是html文件内容

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <script src="./tc.js" type="text/javascript"></script>   <link rel="stylesheet" href="./tc.css">   <style>     * {       padding: 0;       margin: 0;     }   </style> </head> <body>   <button onclick="openMyPopup()">弹窗</button>   <script>     function MyPopupSure(user,pow) {       console.log('我是确定按钮')       console.log(user,pow)       return true // 操作成功true关闭弹窗/失败false弹窗不关闭     }   </script> </body> </html>
下面是js内容
// 此插件的使用方法 // openMyPopup()打开弹窗 // 点击取消可直接关闭弹窗，也可调用MyPopupClose()函数，该函数return false不关闭弹窗，true关闭弹窗 // 确认按钮调用MyPopupSure()函数，该函数有两个参数user和pow，该函数return false不关闭弹窗，true关闭弹窗
window.onload = function () {   var html = '<div class="MyPopup"><div class="disflex tabBox"><div class="tab tabactive" data-index="0">员工账号</div><div class="tab" data-index="1">AD账号</div><div class="tab" data-index="2">统一账号</div></div><div style="margin-top: 15px;" class="disflex"><span>用户名：</span><input type="text" placeholder="请输入用户名" class="flexOne user"></div><div style="margin-top: 10px;" class="disflex"><span>密  码：</span><input type="text" placeholder="请输入密码" class="flexOne pow"></div><div class="disflex btnbox" style="margin-top: 20px;"><div class="btn" data-index="0">取消</div><div class="btn" data-index="1">确定</div></div></div>'
  var MyPopupBoxDom = document.createElement("div"); //创建一个div   MyPopupBoxDom.setAttribute('id','MyPopup') // 给div绑定id值   document.querySelector('body').appendChild(MyPopupBoxDom) // 将上边新建的div添加到body内   document.querySelector('#MyPopup').innerHTML = html // 将新增加的div内增加弹窗dom字符串
  var MyPopup_index = 0   document.querySelector('#MyPopup .tabBox').addEventListener('click',function(ev) { // 绑定tab事件     var ev = ev || window.event;     var target = ev.target || ev.srcElement;     var MyPopup_Newindex = target.getAttribute('data-index')     var tablist = document.querySelectorAll('#MyPopup .tabBox .tab')     if(MyPopup_Newindex == MyPopup_index ) {       return     }else{       MyPopup_index = MyPopup_Newindex     }     for(var a =0;a<tablist.length;a++) {       tablist[a].classList.remove('tabactive')     }     if(target.classList.contains('tab')) {       document.querySelector('#MyPopup .user').value = ''       document.querySelector('#MyPopup .pow').value = ''       tablist[target.getAttribute('data-index')].classList.add('tabactive')     }   })
  document.querySelector('#MyPopup').addEventListener('click',function(ev) { // 绑定tab事件     var ev = ev || window.event;     var target = ev.target || ev.srcElement;     if(target.getAttribute('id') == 'MyPopup') {       document.querySelector('#MyPopup').style.display = 'none'     }   })
  document.querySelector('#MyPopup .btnbox').addEventListener('click',function(ev) { // 绑定底部确认取消按钮事件     var ev = ev || window.event;     var target = ev.target || ev.srcElement;     var tablist = document.querySelectorAll('#MyPopup .btnbox .btn')     if(target.classList.contains('btn')) {       var btnNum = target.getAttribute('data-index')       if(btnNum == 0) {         try{ // 可以添加自定义取消事件           if(MyPopupClose()) {             clearMyPopup_input()           }else{             console.log('不关闭弹窗')           }         }catch(err){           clearMyPopup_input()         }       }else{         var user = document.querySelector('#MyPopup .user').value         var pow = document.querySelector('#MyPopup .pow').value         if(MyPopupSure(user,pow)) { // 将用户名及密码给到确认按钮函数/函数返回true操作成功关闭弹窗/失败或不需要关闭弹窗反false           clearMyPopup_input()         }else{           console.log('不关闭弹窗')         }       }     }   })
  function clearMyPopup_input() { // 清空弹窗并关闭弹窗     document.querySelector('#MyPopup .user').value = ''     document.querySelector('#MyPopup .pow').value = ''     document.querySelector('#MyPopup').style.display = 'none'   } } function openMyPopup() { // 外部调用打开弹窗   document.querySelector('#MyPopup').style.display = 'block' }
下面是css内容
#MyPopup {   width: 100%;   height: 100%;   position: fixed;   background-color:rgba(0, 0, 0,0.4);   text-align: center;   top: 0;   display: none;   z-index: 999; } #MyPopup .MyPopup {   position: absolute;   width: 80%;   border-radius: 5px;   background-color: #fff;   /* height: 300px; */   top: 150px;   left: 10%;   padding: 20px;   box-sizing: border-box; } #MyPopup .disflex {   display: flex; } #MyPopup .flexOne {   flex: 1; } #MyPopup .tabBox .tab{   padding: 0px 0 5px 0;   color: blue; } #MyPopup .disflex .tabactive {   border-bottom: 2px solid blue; } #MyPopup  span {   display: inline-block;   width: 70px; } #MyPopup input {   padding: 5px 0; } #MyPopup .disflex .tab {   flex: 1; } #MyPopup .btnbox {   margin-top: 10px;   color: blue;   justify-content: space-around; } #MyPopup .disflex .btn {   border-radius: 5px;   border: 1px solid blue;   width: 30%; } #MyPopup .disflex .btn:nth-child(2) {   background-color: blue;   color: #fff; } 如果你也对原生感兴趣可以联系我呀QQ283254340，上面代码有不妥的也可以给我发邮件，共同学习

码农公寓

相关文章