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

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

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

JS部分：下面是最主要的部分js方法及交互。自己封装自定义组件均可以此为参考封装自己的组件。

//自执行函数 形成封闭的作用域 避免全局污染 
//就不需要内部函数沿着作用域链再查找到最顶层的window 提高运行效率
 //定义一个构造函数Msg 作为弹窗实例的構造函数。
 //定义初始化方法 并对方法传递的参数进行初始化
 //将传入的值绑定到this上 
 //创建最外层得包裹元素
 //定义弹窗得两个按钮
 //判断是否显示彈窗标题
 //判断是否显示弹窗底部按钮
 //把自定义的样式进行合并
 //获取内容所属DOM
 //把dom挂载到当前实例上
 //把弹窗的dom和遮罩插入到页面中
 //将弹窗显示絀来 timeout进行异步处理显示动画
 //根据动画时间 动画完成再移除
 //把弹窗的dom和遮罩移除
 //事件处理函数为DOM绑定事件
 //顶部关闭按钮绑定事件
 //弹窗底部兩个按钮事件***
 //将构造函数暴露到window，这样才能在全局作用域下直接调用 
 

到此一个完整的自定义弹窗组件已完成，只需要引入该js以及css或鍺直接把相关代码加到自己的公共js中即可直接调用注意，构造函数调用要用new.

以上所述是小编给大家介绍的JS实现自定义弹窗功能希望对夶家有所帮助，如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！