當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

js实现自定义弹窗

發布時間：2024/9/19 综合教程 32 生活家

生活随笔收集整理的這篇文章主要介紹了 js实现自定义弹窗小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

CSS

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動態圖）：

覺得不錯的，趕快動手試試吧。紙上得來終覺淺，絕知此事要躬行。

海納百川，有容乃大；壁立千仞，無欲則剛。人要有胸懷方能成大事，不要被欲望所驅使，方能風吹不動浪打不搖。

不積跬步無以至千里，不積小流無以成江海。從事技術工作，要時刻學習積累，即使不能一專多能也應術業有專攻，方能以不變應萬變。

總結

以上是生活随笔為你收集整理的js实现自定义弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

自定义
js

上一篇：千万不要去发热门诊什么意思
下一篇： java esp_在我的ESP游戏方法中