平常业务中alert经常使用,但是alert经常自带一个网址title,需要自己定义一个弹窗,下面记录下

let customAlert = (message) => {
     // 使用原生JavaScript创建一个div作为模拟alert框
     var divaa = document.createElement('div');
     divaa.innerHTML = "<div style='margin-top: 10%; margin-left: 35%;;width: 30%;padding: 15px;border-radius: 14px;background-color: white;box-shadow: rgb(153, 153, 153) 0px 7px 20px;z-index: 100;'>" + message + "<div style='margin-top:10px;display: flex;justify-content: flex-end'></div></div>";
     divaa.style.position = 'fixed';
     divaa.style.top = '0%';
     divaa.style.left = '0%';
     divaa.style.width = '100%';
     divaa.style.height = '100%';
     divaa.style.background = 'rgb(0,0,0,0.3)';
     divaa.style.zIndex = '99';

     // // 添加关闭按钮
     var closeBtn = document.createElement('div');
     closeBtn.innerHTML = "<span style='cursor:pointer;padding:6px 14px; background-color: #3f51b5; color: #fff; border-radius: 20px;'> 确认 </span>"
     closeBtn.style.marginTop = '20px';
     closeBtn.style.display = 'flex';
     closeBtn.style.justifyContent = 'flex-end';
       //触发时关闭页面滚动
     document.body.style.overflow = 'hidden'
     closeBtn.onclick = function () {
       divaa.parentNode.removeChild(divaa);
       //关闭时页面滚动
       document.body.style.overflow = 'visible'
     }
     divaa.firstChild.appendChild(closeBtn);
     // 将div添加到body中
     document.body.appendChild(divaa);
   }

   // // 使用自定义alert函数
   customAlert('这是一个自定义的alert对话框。');

直接调用就方法就可以了简单便捷


一叶知秋
48 声望3 粉丝

记录学习,记录自己