實(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需再刷新一下頁面才能執(zhí)行]
3. 使用inline-block實(shí)現(xiàn)未知高度垂直居中的方法（看圖和demo吧，表述能力有限）：
圖示：
代碼演示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
存在的兩個(gè)細(xì)節(jié)性問題：
大家可以看到完整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)文章
精通Javascript系列之?dāng)?shù)值計(jì)算
在JS中如果希望某個(gè)變量包含一個(gè)數(shù)值，那么無需限定其必須是整數(shù)或者是浮點(diǎn)數(shù)，下面來個(gè)例子2011-06-06
使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對象參數(shù)
該函數(shù)兼容ie，firefox。并且可以使用clearSetTimeOut和clearInterval清除，比原setTimeout，setInterval方便很多，并且參數(shù)可以是object。2009-04-04
下面小編就為大家?guī)硪黄W(wǎng)頁中的圖片查看器viewjs使用方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
實(shí)例解析package.json和最常見的scripts字段
日常開發(fā)中，現(xiàn)在的前端開發(fā)已經(jīng)被三大框架取代，其中最主流的不過vue和react，而開發(fā)這些項(xiàng)目的時(shí)候不得不接觸package.json這個(gè)文件，可你真的了解這個(gè)文件嗎？今天給大家聊聊package.json和最常見的scripts字段，感興趣的朋友一起看看吧2023-04-04
JavaScript實(shí)現(xiàn)Flash炫光波動(dòng)特效
JavaScript寫的炫光波動(dòng)效果,看到一些Flash效果不錯(cuò),用JS也模擬一下,還有很多不完善的地方,給各位參考參考。2015-05-05
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈現(xiàn)PDF文件,它支持內(nèi)容檢索、頁面跳轉(zhuǎn)、文件打印等功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
下面小編就為大家?guī)硪黄獪\談JavaScript對象與繼承。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JS如何完整獲取IE瀏覽器信息包括類型、版本、語言等等,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS利用?React.lazy?優(yōu)化頁面初次渲染,React.lazy?接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用import()，它必須返回一個(gè)Promise，該P(yáng)romise需要resolve一個(gè)default?export的React組件2022-07-07
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2015-11-11