實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離減少JS
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-09JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下2015-06-06詳解如何優(yōu)雅迭代JavaScript字面對(duì)象
迭代是訪問(wèn)集合元素的一種方法,可以被迭代的對(duì)象稱為可迭代對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-05-05JavaScript中的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-12JavaScript表單通過(guò)正則表達(dá)式驗(yàn)證電話號(hào)碼
通過(guò)正則表達(dá)式實(shí)現(xiàn)判斷一個(gè)輸入量是否為電話號(hào)碼,需要的朋友可以參考下2014-03-03