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));
             }
         }
     })

msgbox

css

//=== 关键部分css样式
// 弹出框时,body设为无滚动条
.overflowhide {
    overflow: hidden;
}
// 遮罩层/
.msgbox-shadow {
    position: fixed;
    left:;
    top:;
    right:;
    bottom:;
    // 黑色背景,透明度
    opacity: .4;
    background-color: #000;
    // 层级位于弹出层父级之下
    z-index:;
}
// 弹出层父级
.msgbox-modal {
    // 使用flex布局,默认弹出层水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
    // 固定定位
    position: fixed;
    left:;
    top:;
    right:;
    bottom:;
    overflow-x: hidden;
    overflow-y: auto;
    // 在遮罩层之上
    z-index:;
}

---

详细示例代码,修改后的

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