JS簡易彈出層

目標

實現簡易的js彈出框.為了簡單靈活的在小項目中使用.

實現思路

研究bootstrap的彈出框效果后,認為層級示意圖如下:

層說明

彈出層分為三層.最底層的遮罩層,覆蓋在瀏覽器視口上.它之上是彈出層父級,這個層完全透明,並且與遮罩層重合.最上層是彈出層,它的活動范圍在其父層的范圍內.

1. 彈出時,隱藏body的滾動條
2. 遮罩層位於body直屬,固定定位,大小與視口相等.不必有dom,在每次彈出時,由js直接生成.
3. 彈出層父級位於body直屬,透明隱藏,大小同遮罩層,自動垂直滾動條.位於遮罩層與彈出層之間.
4. 彈出層是一個自定義的DOM,位於最上層.
5. 每個彈出層可做一個模板,放在templete標記內.

html結構

建議的彈出層的HTML結構

<div class="msgbox-content">
  <div class="msgbox-header"><h3 class="msgbox-title">標題</h3><a class="msgbox-close">×</a></div>
  <div class="msgbox-body">彈出框內容</div>
  <div class="msgbox-footer"><a class="btn lg">確定</a><a class="btn lg">取消</a></div>
</div>

位置

彈出層父級使用flex布局,可簡潔的實現在9種位置上彈出.

實現功能

jq插件方式,模態框和倒計時消失框,9種位置彈出,按esc關閉,點擊背景關閉,支持綁定顯示前后和關閉后事件,自由定義彈出框

使用方式

// alert框
$.msgboxalert('alert框,默認2秒后關閉.')
// 倒計時間3秒關閉
$.msgboxalert('alert框,默認2秒后關閉.',3000)
// 顯示在右下方
$.msgboxalert('alert框,默認2秒后關閉.',3000,'br')

// 模態框
let config={
  escClose:true
}
$('#msg_box').modal(config);

js

$.extend({
        // alert框 {msg:要提示的信息,[timeout]:關閉時間(2000毫秒),[location]:位置(tl,tm,tr,ml,mr,bl,bm,br)}
        msgboxalert: function (msg, timeout, location)
        {
            $('body .msgbox-modal').remove();
            // alert組件彈出層Dom
            let dom = '<div class="msgbox-modal $location"><div class="msgbox-alert">$msg</div></div>';
            dom = dom.replace("$msg", msg || '');
            dom = dom.replace("$location", location || '');
            //
            $('body').append(dom);
            // 自動消失
            setTimeout(() =>
            {
                $('body .msgbox-modal').remove();
            }, timeout || 2000)
        },
        // 清除所有彈出框,還原body滾動條狀態 {closeE:fun}
        msgboxClear: function (closeE)
        {
            $('body').find('.msgbox-shadow,.msgbox-modal').remove();
            $('body').removeClass('overflowhide');
            if (typeof closeE == 'function')
            {
                closeE();
            }
        }
    });
$.fn.extend({
        // 模態框 {beforeShow:fun,afterShow:fun,afterClose:fun,escClose:false,backClose:false,location:''}
        modal: function (config)
        {
            //=== 彈出層父級類名:為方便引用()
            let modalClsName = 'msgbox-modal';
            //=== init config
            let cfg = {};
            if (config)
            {
                // 顯示之前執行
                cfg.beforeShow = config.beforeShow || null;
                // 顯示后執行
                cfg.afterShow = config.afterShow || null;
                // 關閉后執行
                cfg.afterClose = config.afterClose || null;
                // 按esc關閉
                cfg.escClose = config.escClose || false;
                // 點擊背景(彈出層父級)關閉
                cfg.backClose = config.backClose || false;
                // 位置
                cfg.location = config.location || '';
            }

            //===
            // body禁用滾動條
            // 刪除舊的遮罩層
            $('body').addClass('overflowhide').find('.msgbox-shadow,.msgbox-modal').remove();

            //=== 彈出層准備: dom生成,相關事件執行
            // 將彈出層包含在彈出層父級DOM中
            let modal = $('<div class="' + modalClsName + ' ' + cfg.location + '" tabindex="-1"></div>');
            modal.append($(this));
            // x按鈕事件:點擊關閉彈出框
            modal.find('.msgbox-close').on('click', function ()
            {
                $.msgboxClear(cfg.afterClose);
            })
            // 按ESC關閉
            if (cfg.escClose == true)
            {
                modal.on("keyup", function (event)
                {
                    //alert(event.target.className + event.which );
                    if (event.which != 27 || event.target.className.indexOf(modalClsName)==-1)
                        return;
                    $.msgboxClear(cfg.afterClose);
                });
            }
            // 點擊背景關閉
            if (cfg.backClose == true)
            {
                modal.on('click', function (event)
                {
                    if (event.target.className.indexOf(modalClsName) == -1)
                        return;
                    $.msgboxClear(cfg.afterClose);
                });
            }
            // 顯示之前執行
            if (typeof cfg.beforeShow == 'function')
            {
                cfg.beforeShow($(this));
            }
            // 顯示遮罩
            $('body').append('<div class="msgbox-shadow"></div>');
            // 顯示彈出框
            $('body').append(modal);
            // 讓彈出層父級獲得焦點
            modal.focus();
            // 顯示之后執行
            if (typeof cfg.afterShow == 'function')
            {
                cfg.afterShow($(this));
            }
        }
    })

 css

//=== 關鍵部分css樣式
 // 彈出框時,body設為無滾動條
.overflowhide {
    overflow: hidden;
} // 遮罩層/
.msgbox-shadow {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; // 黑色背景,透明度
    opacity: .4;
    background-color: #000; // 層級位於彈出層父級之下
    z-index: 10000;
} // 彈出層父級
.msgbox-modal { // 使用flex布局,默認彈出層水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center; // 固定定位
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto; // 在遮罩層之上
    z-index: 10001;
}

 

---

詳細示例代碼,修改后的

https://github.com/mirrortom/webcoms/tree/master/msgbox