眾所周知，瀏覽器自帶的原生彈窗很不美觀，而且功能比較單一，絕大部分時候我們都會按照設計圖自定義彈窗或者直接使用注入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">
</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; }
JS部分：下面是最主要的部分，js方法及交互。自己封裝自定義組件均可以此為參考，封裝自己的組件。
/* *自定義彈窗 */ //自執行函數 形成封閉的作用域 避免全局污染 //傳入windwo和document對象 相當於將window和document作為了作用域中的局部變量， //就不需要內部函數沿着作用域鏈再查找到最頂層的window 提高運行效率。 (function (window, document) { //定義一個構造函數Msg 作為彈窗實例的構造函數。 let Msg = 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() { //創建最外層得包裹元素 let wrap = document.createElement("div"); wrap.className = "msg__wrap"; //定義彈窗得兩個按鈕 const [confirmBtnName, cancelBtnName] = this.btnName; //判斷是否顯示彈窗標題 const headerHTML = this.header ? `<div class="msg-header"> <span>${this.title}</span> <span class="msg-header-close-button">×</span> </div>` : ""; //判斷是否顯示圖標 const iconHTML = this.showIcon ? `<div class="msg-body-icon"> <div class="msg-body-icon-${this.type}"></div> </div>` : ""; //判斷是否顯示彈窗底部按鈕 const footerHTML = this.footer ? `<div class="msg-footer"> <button class="msg-footer-btn msg-footer-cancel-button">${cancelBtnName}</button> <button class="msg-footer-btn msg-footer-confirm-button">${confirmBtnName}</button> </div>` : ""; //拼接完整html const innerHTML = `${headerHTML} <div class="msg-body"> ${iconHTML} <div class="msg-body-content"></div> </div> ${footerHTML}`; //將拼接的html賦值到wrap中 wrap.innerHTML = innerHTML; //把自定義的樣式進行合並 const contentStyle = { fontSize: this.contentFontSize, ...this.contentStyle } //獲取內容所屬DOM let content = wrap.querySelector(".msg-body .msg-body-content"); //將傳過來的樣式添加到contentDOM for (const key in contentStyle) { if (contentStyle.hasOwnProperty(key)) { content.style[key] = contentStyle[key]; } } //給彈窗的conntent賦值 if (this.useHTML) { content.innerHTML = this.content; } else { content.innerText = this.content; } //創建遮罩層 let overlay = document.createElement("div"); overlay.className = "msg__overlay"; //把dom掛載到當前實例上 this._overlay = overlay; this._el = wrap; }, //彈窗展現方法 _show({ el, overlay }) { //把彈窗的dom和遮罩插入到頁面中 document.body.appendChild(el); document.body.appendChild(overlay); //將彈窗顯示出來 timeout進行異步處理顯示動畫 setTimeout(() => { el.style.transform = "translate(-50%,-50%) scale(1,1)"; overlay.style.opacity = "1"; }) }, //關閉彈窗方法 _close({ el, overlay }) { //隱藏dom el.style.transform = "translate(-50%,-50%) scale(0,0)"; overlay.style.opcity = "0"; //根據動畫時間 動畫完成再移除 setTimeout(() => { //把彈窗的dom和遮罩移除 document.body.removeChild(el) document.body.removeChild(overlay); }, 300); }, //事件處理函數，為DOM綁定事件 _bind({ el, overlay }) { //保存當前this //const _this = this; const cancle = (e) => { this.cancle && this.cancle.call(this, e); //隱藏彈窗 //hideMsg(); this._close({ el, overlay }); } //確認彈窗 const confirm = (e) => { this.confirm && this.confirm.call(this, e); this._close({ el, overlay }); } //頂部關閉按鈕綁定事件 if (this.header) { el.querySelector(".msg-header-close-button").addEventListener("click", cancle); } //彈窗底部兩個按鈕事件監聽 if (this.footer) { el.querySelector(".msg-footer-cancel-button").addEventListener("click", cancle); el.querySelector(".msg-footer-confirm-button").addEventListener("click", confirm) } } } //將構造函數暴露到window 可直接在全局作用域中訪問構造函數 window.$Msg = Msg; })(window, document);
到此，一個完整的自定義彈窗組件已完成，只需要引入該js以及css或者直接把相關代碼加到自己的公共js中即可直接調用，注意，構造函數調用要用new.
下面是點擊之后彈窗圖效果（gif動態圖）：
覺得不錯的，趕快動手試試吧。紙上得來終覺淺，絕知此事要躬行。