JS簡易彈出層
阿新 • • 發佈:2017-08-06
find -a standard 函數對象 自定義 def rop 使用步驟 relative
一個簡易的彈出框,內容層自定義.為了簡單靈活的在小項目中使用.
目標要求
模仿bootstrap的彈出層實現
如何實現
bootstrap彈出框的效果.經過研究後.思路如下
- 將要彈出的DIV要置於body直屬.不必有遮罩DIV.它在運行時由JS生成.關閉時再刪掉
- 彈出層DIV和遮罩層使用絕對定位並且長寬一樣,在彈出前,將BODY設為無滾動條,以消除網頁有滾動條時的蓋不住問題
- 彈出層DIV.長寬與頁面窗口一樣,背景透明.可以單擊(單擊背景關閉彈出層功能),可以垂直滾動.
- 彈出層第二級為彈出內容父層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=約定好的按鈕名字
可以綁定一個關閉窗口後的事件
使用步驟註意事項
- 建一個要彈出的DIV層,放在BODY下.最外層加上類名msgboxbg,加上一個id
- 調用msgBox.show(domid,cfg)
- msgboxshadow是遮罩層的樣式名,是必要的.msgboxbg是彈出層最外層的樣式名,是必要的
- 內容層位於彈出框的最外層下級,自定義彈出框的大小與位置.(可以使用設定好的msgboxcontent樣式).這個不是必要的,如果沒有這一層,內容就會顯示在左上角.
實驗測試
/*彈出時給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區域
JS簡易彈出層