JS简易弹出层

一个简易的弹出框,内容层自定义.为了简单灵活的在小项目中使用.

目标要求

模仿bootstrap的弹出层实现

如何实现

bootstrap弹出框的效果.经过研究后.思路如下

1. 将要弹出的DIV要置于body直属.不必有遮罩DIV.它在运行时由JS生成.关闭时再删掉
2. 弹出层DIV和遮罩层使用绝对定位并且长宽一样,在弹出前,将BODY设为无滚动条,以消除网页有滚动条时的盖不住问题
3. 弹出层DIV.长宽与页面窗口一样,背景透明.可以单击(单击背景关闭弹出层功能),可以垂直滚动.
4. 弹出层第二级为弹出内容父层DIV.长宽,位置与内容自定义.

建议的弹出层的HTML结构 仿bootstrap

<div id=xxx class="msgboxbg">  // 弹出框的最外层必要 msgboxbg类名必要

 <div class="msgbox">   // 内容层父级(建议)

   <div class="msgboxheader"></div> // 内容层HEAD区(建议)

   <div class="msgboxbody"></div> // 内容层BODY区(建议)

   <div class="msgboxfooter"></div> // 内容层FOOTER区(建议)

 </div>

</div>

目前能实现的效果和功能

模仿BT的弹出框,弹出窗口可以滚动,但背景不会动.

点击内容层外的区域可以关闭弹出层,按ESC也可以关闭弹出层

可以绑定事件确定 取消,按钮DOM上要设置role=约定好的按钮名字

可以绑定一个关闭窗口后的事件

使用步骤注意事项

1. 建一个要弹出的DIV层,放在BODY下.最外层加上类名msgboxbg,加上一个id
2. 调用msgBox.show(domid,cfg)
3. msgboxshadow是遮罩层的样式名,是必要的.msgboxbg是弹出层最外层的样式名,是必要的
4. 内容层位于弹出框的最外层下级,自定义弹出框的大小与位置.(可以使用设定好的msgboxcontent样式).这个不是必要的,如果没有这一层,内容就会显示在左上角.

实验测试

弹出一个空框 弹出绑定了确定按钮的框 弹出一个建议标准的框 弹出加载IFRAME的框

/*弹出时给body加上这个,关闭时去掉*/
.overhide {
    overflow: hidden;
}
/*关键样式 遮罩层的*/
.msgboxshadow {
    position: fixed; /*固定定位*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .5; /*背景透明度.这里没有兼容样式*/
    background-color: #000; /*背景色*/
    z-index: 10000; /*层级数仅小于内容弹出框*/
}
/*关键样式 弹出框最外层*/
.msgboxbg {
    display: none;
    position: fixed; /*固定定位*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10001; /*比遮罩层大1,要显示在遮罩层上面*/
}
/*内容层默认样式*/
.msgboxcontent {
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 2px 2px 40px #000000;
    margin: 30px auto 0 auto;
    width:250px;
    height:150px;
    overflow:auto;
    text-indent:10px;
    padding-top:5px;
}

关键样式

/*--msgbox函数对象,相当于弄了一个类,方法都在这个函数(类)上,是"静态"的--*/
function msgBox()
{
}
/*****************************************/
/*******************  PROPERTY     ******/
/****************************************/
// public 按ESC关闭? 否置false(bool)
msgBox.ESCclose = true;
// public 点击背景关闭?(bool)
msgBox.Bgclose = true;
// public 弹出层关闭之后事执行
msgBox.closedEvent = null;
// public 确定按钮 [role = btnok]
msgBox.okEvent = null;
// public 取消(关闭)按钮 [role = btncancel]
msgBox.cancelEvent = null;

// 当前弹出层元素的ID(string)
msgBox.CurrentDomId = null;
// 当前弹出层元素的JQERY对象
msgBox.CurrentDomJqObj = null;
/******************************************/
/******************* FUNCTION     *******/
/*****************************************/
// 显示弹出层(主要方法) domid=弹出层DOM的id , cfg=配置JSON
msgBox.show = function (domid, cfg)
{
    // 当前要弹出的层的ID(这两个属性要最后才重置)
    msgBox.CurrentDomId = domid;
    msgBox.CurrentDomJqObj = $(‘#‘ + domid);
    // 将配置设置到属性
    msgBox.config(cfg);
    // window的宽度与高度
    //var windowWidth = window.innerWidth;
    //var windowHeight = window.innerHeight;
    // 文档宽度与高度
    //var scrollTop = $(document).scrollTop();
    //var scrollLeft = $(document).scrollLeft();
    // 先将body的滚动条设无,这样遮罩范围就限于当前窗口大小.遮罩和弹出层还须是固定定位
    $(‘body‘).addClass(‘overhide‘);
    // 加入遮罩层
    $(‘body .msgboxshadow‘).remove();
    $(‘body‘).append(‘<div class="msgboxshadow"></div>‘);
    // 要获得焦点,需要设定这个属性tabindex
    msgBox.CurrentDomJqObj.attr(‘tabindex‘, -1);
    // 显示内容层
    msgBox.CurrentDomJqObj.show().focus();
}
// 用于配置属性的方法,参数是JSON对象 传入 def 则恢复到默认配置
msgBox.config = function (cfg)
{
    msgBox.reset();
    if (cfg) {
        // 属性设定
        for (var n in cfg) {
            if (msgBox[n] !== undefined)
                msgBox[n] = cfg[n];
        }
    }
    // 事件绑定
    msgBox.bindEvent();
}
// 将属性重置,将事件清空.但不清除当前弹出层JQ对象 不应在外部调用此法 关闭时会调用此方法
msgBox.reset = function ()
{
    msgBox.ESCclose = true; // 按ESC关闭
    msgBox.Bgclose = true; // 点击背景关闭
    msgBox.closedEvent = null; // 窗口关闭后执行
    msgBox.okEvent = null;   // 确定按钮 [role = btnok]
    msgBox.cancelEvent = null;// 取消(关闭)按钮 [role = btncancel]
    // event
    msgBox.CurrentDomJqObj.off(‘keyup click‘);
    msgBox.CurrentDomJqObj.find("[role = btnok]").off(‘click‘);
    msgBox.CurrentDomJqObj.find("[role = btncancel]").off(‘click‘);
}
// 该方法用于绑定事件:有默认事件如: 按ESC关闭,点击背景关闭.也有指定的事件,如确定 取消
// 不应在外部调用此方法,所有属性和事件应在CFG方法中传入,CFG会调用此方法
msgBox.bindEvent = function ()
{
    // 默认事件绑定 按ESC关闭,点击关闭
    if (msgBox.ESCclose === true) {
        msgBox.CurrentDomJqObj.on("keyup", function (event)
        {
            // 只在这个元素上触发
            if (event.target.id === msgBox.CurrentDomId) {
                var keycode = event.which;
                if (keycode === 27)
                    msgBox.close();
            }
        })
    }
    // 默认事件绑定 点击背景关闭
    if (msgBox.Bgclose === true)
        msgBox.CurrentDomJqObj.on(‘click‘, function (event)
        {
            if (event.target.id === msgBox.CurrentDomId) {
                msgBox.close();
            }
        });
    // 事件 但role约定为btnok(确定) btncancel(取消)
    if (typeof msgBox.okEvent === ‘function‘)
        msgBox.CurrentDomJqObj.find("[role = btnok]").on("click", function ()
        {
            msgBox.okEvent();
        })
    if (typeof msgBox.cancelEvent === ‘function‘)
        msgBox.CurrentDomJqObj.find("[role = btncancel]").on("click", function ()
        {
            msgBox.cancelEvent(); msgBox.close();
        })
}
// 关闭对话框
msgBox.close = function ()
{
    // 还原文档的滚动条,清除遮罩层
    $(‘body‘).removeClass(‘overhide‘);
    $(‘body .msgboxshadow‘).remove();
    // 隐藏弹出层
    msgBox.CurrentDomJqObj.hide();
    // 执行关闭后事件
    if (typeof msgBox.closedEvent === ‘function‘)
        msgBox.closedEvent();
    // 重置弹出层
    msgBox.reset();
    // 当前弹出层ID和jquery引用销毁
    msgBox.CurrentDomId = null;
    msgBox.CurrentDomJqObj = null;
}

弹出层类

弹出一个空框

有确定按钮,按钮绑定了事件,确定后,弹出此框的按钮变红

确定

标准弹出框 HEADER区域

这个是仿制的BOOTSTRAP的弹出框

按ESC可关闭

点击背景也可以关闭

标准弹出框FOOTER区域