目標
實現簡易的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"
>取消
位置彈出層父級使用flex布局,可簡潔的實現在9種位置上彈出.
實現功能
jq外掛程式方式,模態框和倒計時消失框,9種位置彈出,按esc關閉,點選背景關閉,支援繫結顯示前後和關閉後事件,自由定義彈出框
使用方式
//jsalert框
$.msgboxalert('alert框,預設2秒後關閉.')
//倒計時間3秒關閉
$.msgboxalert('alert框,預設2秒後關閉.',3000)
//顯示在右下方
$.msgboxalert('alert框,預設2秒後關閉.',3000,'br')
//模態框
let config=
$('#msg_box').modal(config);
1msgbox$.extend(
3 msgboxalert: function
(msg, timeout, location)
4, timeout || 2000)
17},
18//
清除所有彈出框,還原body滾動條狀態
19 msgboxclear: function
(closee)
2027}28
});29
$.fn.extend(
31 modal: function
(config)32;
37if
(config)
3852
53//
===54
//body禁用滾動條
55//
刪除舊的遮罩層
56 $('body').addclass('overflowhide').find('.msgbox-shadow,.msgbox-modal').remove();
5758
//=== 彈出層準備: dom生成,相關事件執行
59//
將彈出層包含在彈出層父級dom中
60 let modal = $('
');));
62//
x按鈕事件:點選關閉彈出框
63 modal.find('.msgbox-close').on('click', function
()64)67
//按esc關閉
68if (cfg.escclose == true)69
);77}78
//點選背景關閉
79if (cfg.backclose == true)80
);87}88
//顯示之前執行
89if (typeof cfg.beforeshow == 'function')
9093
//顯示遮罩
95//
顯示彈出框
97//
讓彈出層父級獲得焦點
98modal.focus();
99//
顯示之後執行
100if (typeof cfg.aftershow == 'function')
101104
}105 })
css
//=== 關鍵部分css樣式詳細示例**,修改後的// 彈出框時,body設為無滾動條
.overflowhide // 遮罩層/
.msgbox-shadow // 彈出層父級
.msgbox-modal
JS彈出層居中
直接上 html 有兩個div backgroundpopup和fordetail css美工設計 與我無關 關於獲取各種瀏覽器可見視窗大小的一點點研究 在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body....
JS 04 彈出層案例
lang en charset utf 8 name keywords content name description content title 按鈕樣式 input 遮蓋層樣式 cover 彈窗樣式 box style head type button value 點我彈出內容 wrap 隨便...
製作彈出層
最近在做乙個公司部落格，頁面上用到了很多彈出層，於是大家就仿照著其他 上的彈出層做了乙個。提示 頁面彈出層樣式 background outdiv outtitle titlelayer closelayer outcontent outbottom outdiv input 頁面彈出層 funct...