眾所周知,瀏覽器自帶的原生彈窗很不美觀,而且功能比較單一,絕大部分時候我們都會按照設計圖自定義彈窗或者直接使用注入layer的彈窗等等。前段時間在 慕課網(wǎng) 上看到了一個自定義彈窗的實現(xiàn),自己順便就學習嘗試寫了下,下面是主要的實現(xiàn)代碼并添加了比較詳細的注釋,分享出來供大家參考。(代碼用了ES6部分寫法如需兼容低版本瀏覽器請把相關代碼轉成es5寫法,后面有時間更新為一個兼容性較好的es5版本)
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比興慶網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式興慶網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們,業(yè)務覆蓋興慶地區(qū)。費用合理售后完善,十多年實體公司更值得信賴。
HTML部分:(沒什么內容 放置一個按鈕調用函數(shù),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>
樣式部分:也放出來供參考,樣式可以根據(jù)自己的設計圖自行更改即可
/* 彈出框最外層 */ .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方法及交互。自己封裝自定義組件均可以此為參考,封裝自己的組件。
/* *自定義彈窗 */ //自執(zhí)行函數(shù) 形成封閉的作用域 避免全局污染 //傳入windwo和document對象 相當于將window和document作為了作用域中的局部變量, //就不需要內部函數(shù)沿著作用域鏈再查找到最頂層的window 提高運行效率。 (function (window, document) { //定義一個構造函數(shù)Msg 作為彈窗實例的構造函數(shù)。 let Msg = function (options) { //執(zhí)行初始化操作 this._init(options); } //定義初始化方法 并對方法傳遞的參數(shù)進行初始化 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; //執(zhí)行創(chuàng)建元素方法 this._creatElement(); //顯示彈窗及遮罩 this._show({ el: this._el, overlay: this._overlay }); //綁定事件處理函數(shù) this._bind({ el: this._el, overlay: this._overlay }); }, //創(chuàng)建彈窗元素方法 _creatElement() { //創(chuàng)建最外層得包裹元素 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; } //創(chuàng)建遮罩層 let overlay = document.createElement("div"); overlay.className = "msg__overlay"; //把dom掛載到當前實例上 this._overlay = overlay; this._el = wrap; }, //彈窗展現(xiàn)方法 _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"; //根據(jù)動畫時間 動畫完成再移除 setTimeout(() => { //把彈窗的dom和遮罩移除 document.body.removeChild(el) document.body.removeChild(overlay); }, 300); }, //事件處理函數(shù),為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); } //彈窗底部兩個按鈕事件監(jiān)聽 if (this.footer) { el.querySelector(".msg-footer-cancel-button").addEventListener("click", cancle); el.querySelector(".msg-footer-confirm-button").addEventListener("click", confirm) } } } //將構造函數(shù)暴露到window,這樣才能在全局作用域下直接調用 window.$Msg = Msg; })(window, document);
到此,一個完整的自定義彈窗組件已完成,只需要引入該js以及css或者直接把相關代碼加到自己的公共js中即可直接調用,注意,構造函數(shù)調用要用new.
總結
以上所述是小編給大家介紹的JS實現(xiàn)自定義彈窗功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當前文章:JS實現(xiàn)自定義彈窗功能
本文鏈接:http://muchs.cn/article10/pidhdo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供、動態(tài)網(wǎng)站、電子商務、小程序開發(fā)、虛擬主機、網(wǎng)站內鏈
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)