目标
实现简易的js弹出框.为了简单灵活的在小项目中使用.
实现思路
研究bootstrap的弹出框效果后,认为层级示意图如下:
层说明
弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹出层父级,这个层完全透明,并且与遮罩层重合.最上层是弹出层,它的活动范围在其父层的范围内.
- 弹出时,隐藏body的滚动条
- 遮罩层位于body直属,固定定位,大小与视口相等.不必有dom,在每次弹出时,由js直接生成.
- 弹出层父级位于body直属,透明隐藏,大小同遮罩层,自动垂直滚动条.位于遮罩层与弹出层之间.
- 弹出层是一个自定义的DOM,位于最上层.
- 每个弹出层可做一个模板,放在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:;
}
详细示例代码,修改后的