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