JS实现自定义弹窗功能
众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。前段时间在慕课网上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考。(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本)
HTML部分:(没什么内容放置一个按钮调用函数,js中调用实例即可供参考)
自定义弹窗
样式部分:也放出来供参考,样式可以根据自己的设计图自行更改即可
/*弹出框最外层*/ .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:0010px#eee; font-size:10px; } /*弹出框头部*/ .msg__wrap.msg-header{ padding:10px10px010px; font-size:1.8em; } .msg__wrap.msg-header.msg-header-close-button{ float:right; cursor:pointer; } /*弹出框中部*/ .msg__wrap.msg-body{ padding:10px10px10px10px; display:flex; } /*图标*/ .msg__wrap.msg-body.msg-body-icon{ width:80px; } .msg__wrap.msg-body.msg-body-icondiv{ width:45px; height:45px; margin:0auto; 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:010px10px10px; display:flex; flex-direction:row-reverse; } .msg__wrap.msg-footer.msg-footer-btn{ width:50px; height:30px; border:0none; 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; }
JS部分:下面是最主要的部分,js方法及交互。自己封装自定义组件均可以此为参考,封装自己的组件。
/* *自定义弹窗 */ //自执行函数形成封闭的作用域避免全局污染 //传入windwo和document对象相当于将window和document作为了作用域中的局部变量, //就不需要内部函数沿着作用域链再查找到最顶层的window提高运行效率。 (function(window,document){ //定义一个构造函数Msg作为弹窗实例的构造函数。 letMsg=function(options){ //执行初始化操作 this._init(options); } //定义初始化方法并对方法传递的参数进行初始化 Msg.prototype={ _init({ content="",//文本内容 type="info",//信息类型 useHTML=false,//是否解析html字符串 showIcon=true,//是否展示弹窗图标 confirm=null,//确认后得回调 cancle=null,//取消后得回调 footer=true,//是否显示底部的确认按钮 header=true,//是否显示头部信息及关闭按钮 title="提示",//弹窗标题 contentStyle={},//内容样式 contentFontSize="1.5em",//内容字体大小 btnName=["确定","取消"]//按钮文字内容 }){ //将传入的值绑定到this上 this.content=content; this.type=type; this.useHTML=useHTML; this.showIcon=showIcon; this.confirm=confirm; this.cancle=cancle; this.footer=footer; this.header=header; this.title=title; this.contentStyle=contentStyle; this.contentFontSize=contentFontSize; this.btnName=btnName; //执行创建元素方法 this._creatElement(); //显示弹窗及遮罩 this._show({ el:this._el, overlay:this._overlay }); //绑定事件处理函数 this._bind({ el:this._el, overlay:this._overlay }); }, //创建弹窗元素方法 _creatElement(){ //创建最外层得包裹元素 letwrap=document.createElement("div"); wrap.className="msg__wrap"; //定义弹窗得两个按钮 const[confirmBtnName,cancelBtnName]=this.btnName; //判断是否显示弹窗标题 constheaderHTML=this.header? `${this.title} ×