實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離減少JS
更新時(shí)間：2009年07月27日 22:04:09 作者：
本教程旨在實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離，減少JS在各方面（全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應(yīng)內(nèi)容等）的工作。
2. 單行居中，多行居左的方法（看demo吧，表述能力有限）：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
3. 使用inline-block實(shí)現(xiàn)未知高度垂直居中的方法（看圖和demo吧，表述能力有限）：
圖示：
代碼演示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
存在的兩個(gè)細(xì)節(jié)性問(wèn)題：
大家可以看到完整demo中并未出現(xiàn)font-size:0;，而在垂直居中法中卻出現(xiàn)了。
因?yàn)閒ont-size:0在完整demo中，將使firefox3.5中讀者完整閱讀時(shí)lightBox的鼠標(biāo)滾輪失效，原因不詳，這一點(diǎn)大家可以作情處理。
maxHeight這東西只能放在lightBoxContent的后面，因?yàn)樵趏pera9.6中會(huì)出現(xiàn)bug，囧。
相關(guān)文章
原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
詳解如何優(yōu)雅迭代JavaScript字面對(duì)象
迭代是訪問(wèn)集合元素的一種方法,可以被迭代的對(duì)象稱為可迭代對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-05-05
JavaScript中的console.group()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.group()函數(shù)詳細(xì)介紹,當(dāng)程序調(diào)試日志過(guò)多時(shí)會(huì)有些雜亂,此時(shí)可以使用console.group()函數(shù)調(diào)來(lái)分組顯示,需要的朋友可以參考下2014-12-12
本文通過(guò)實(shí)例代碼給大家介紹了bootstrap table樣式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-01-01
JavaScript表單通過(guò)正則表達(dá)式驗(yàn)證電話號(hào)碼
通過(guò)正則表達(dá)式實(shí)現(xiàn)判斷一個(gè)輸入量是否為電話號(hào)碼,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)文件或圖片上傳記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了利用JS生成博文目錄及CSS定制博客的相關(guān)資料,需要的朋友可以參考下2016-02-02
javascript 中 indexOf 是嚴(yán)格區(qū)分大小寫的 如何才能忽略大小寫呢?2008-08-08