眾所周知，瀏覽器自帶的原生彈窗很不美觀，而且功能比較單一，絕大部分時候我們都會按照設計圖自定義彈窗或者直接使用注入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; }
新聞熱點
疑難解答
圖片精選
