JS实现自定义弹窗功能

2024-05-06 15:31:59

字体：大中小

来源：转载

供稿：网友

众所周知，浏览器自带的原生弹窗很不美观，而且功能比较单一，绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。前段时间在慕课网上看到了一个自定义弹窗的实现，自己顺便就学习尝试写了下，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。（代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本）

HTML部分：（没什么内容放置一个按钮调用函数，js中调用实例即可供参考）

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>自定义弹窗</title>  <link rel="stylesheet" href="alert.css" rel="external nofollow" ></head><body>   <button>Click me</button>   <script src="index.js"></script>   <script>    document.querySelector("button").addEventListener("click",()=>{     new $Msg({      content:"我的自定义弹窗好了",      type:"success",      cancle:function(){       let cancle = new $Msg({        content:"我是取消后的回调"       })      },      confirm:function(){       new $Msg({content:"我是确定后的回调"})      }     })    })   </script></body></html>

样式部分:也放出来供参考，样式可以根据自己的设计图自行更改即可

/* 弹出框最外层 */.msg__wrap {  position: fixed;  top: 50%;  left: 50%;  z-index: 10;  transition: all .3s;  transform: translate(-50%, -50%) scale(0, 0);  max-width: 50%;  background: #fff;  box-shadow: 0 0 10px #eee;  font-size: 10px; } /* 弹出框头部 */ .msg__wrap .msg-header {  padding: 10px 10px 0 10px;  font-size: 1.8em; } .msg__wrap .msg-header .msg-header-close-button {  float: right;  cursor: pointer; } /* 弹出框中部 */ .msg__wrap .msg-body {  padding: 10px 10px 10px 10px;  display: flex; } /* 图标 */ .msg__wrap .msg-body .msg-body-icon{  width: 80px; } .msg__wrap .msg-body .msg-body-icon div{  width: 45px;  height: 45px;  margin: 0 auto;  line-height: 45px;  color: #fff;  border-radius: 50% 50%;  font-size: 2em; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{  background: #32a323;  text-align: center; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{  content: "成"; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{  background: #ff8080;  text-align: center; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{  content: "误"; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{  background: #80b7ff;  text-align: center; } .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{  content: "注"; } /* 内容 */ .msg__wrap .msg-body .msg-body-content{  min-width: 200px;  font-size: 1.5em;  word-break: break-all;  display: flex;  align-items: center;  padding-left: 10px;  box-sizing: border-box; } /* 弹出框底部 */ .msg__wrap .msg-footer {  padding: 0 10px 10px 10px;  display: flex;  flex-direction: row-reverse; } .msg__wrap .msg-footer .msg-footer-btn {  width: 50px;  height: 30px;  border: 0 none;  color: #fff;  outline: none;  font-size: 1em;  border-radius: 2px;  margin-left: 5px;  cursor: pointer; } .msg__wrap .msg-footer .msg-footer-cancel-button{  background-color: #ff3b3b; } .msg__wrap .msg-footer .msg-footer-cancel-button:active{  background-color: #ff6f6f; } .msg__wrap .msg-footer .msg-footer-confirm-button{  background-color: #4896f0; } .msg__wrap .msg-footer .msg-footer-confirm-button:active{  background-color: #1d5fac; } /* 遮罩层 */ .msg__overlay {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 5;  background-color: rgba(0, 0, 0, .4);  transition: all .3s;  opacity: 0; }

上一篇：通过jquery的ajax请求本地的json文件方法

下一篇：NodeJs项目中关闭ESLint的方法