一個簡易的彈出框,內容層自定義.為了簡單靈活的在小項目中使用.

目標要求

模仿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;
}

這個是仿制的BOOTSTRAP的彈出框

按ESC可關閉

點擊背景也可以關閉

JS簡易彈出層