AlertBox彈出層信息提示框效果實(shí)現(xiàn)步驟_javascript技巧

在仿Lightbox效果中，已經(jīng)基本實(shí)現(xiàn)了這個(gè)效果，這次主要改進(jìn)了ie6在fixed時(shí)的抖動(dòng)問題。
此外，還增加了一個(gè)用來(lái)兼容ie6的fixed的方法，覆蓋層也重新“包裝”，程序也改成組件的結(jié)構(gòu)。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

效果預(yù)覽 http://demo.jb51.net/js/AlertBox/index.htm

程序說明

【實(shí)現(xiàn)原理】

彈出層的基本原理在仿Lightbox效果中已經(jīng)說的差不多了。
關(guān)鍵的地方就是定位，一般相對(duì)文檔的定位用absolute就行了。
要隨屏移動(dòng)，即相對(duì)窗口定位，就用fixed定位。
這些實(shí)現(xiàn)起來(lái)都很簡(jiǎn)單，除了不支持fixed的ie6。

【兼容ie6的fixed】

由于ie6本身不支持fixed定位，只能模擬或取巧來(lái)間接實(shí)現(xiàn)。
最原始的方法是在window的scroll事件中不斷修正彈出層的位置。
后來(lái)有人發(fā)現(xiàn)還可以通過reflow“離奇”地實(shí)現(xiàn)。
但以上方法都有一個(gè)缺陷，滾動(dòng)時(shí)彈出層會(huì)“發(fā)抖”，很不舒服（可以用緩動(dòng)等來(lái)改善）。

想要不發(fā)抖，可以通過html和css的巧妙應(yīng)用來(lái)實(shí)現(xiàn)，具體參考14px的介紹。
原理是用一個(gè)容器代替body，然后對(duì)不會(huì)動(dòng)的body絕對(duì)定位。
看來(lái)很完美，但有一個(gè)致命的問題，這個(gè)方法需要修改html結(jié)構(gòu)，會(huì)影響到相關(guān)的一些東西，例如window的scroll事件等。

程序中用了另一個(gè)方法，通過body的背景和expression來(lái)實(shí)現(xiàn)，下面是一個(gè)兼容的fixed效果：
代碼如下:






fixable



相比前面的方法，這個(gè)是比較完美的了，但也有一些問題，例如body的背景只能用fixed，使用expression資源消耗相對(duì)較大。
更大的問題是不能實(shí)現(xiàn)用百分比值或right/bottom來(lái)定位。
為了解決這個(gè)問題，程序使用了一個(gè)定位層，這個(gè)層用上面的方法實(shí)現(xiàn)fixed定位，尺寸跟窗口大小一樣，并且位置重合，那么只要用一般的定位方法相對(duì)這個(gè)層定位，就能達(dá)到相對(duì)窗口定位的效果了。

兼容程序主要在RepairFixed對(duì)象中，首先設(shè)置body背景：
代碼如下:
if (body.currentStyle.backgroundAttachment !== "fixed") {
if (body.currentStyle.backgroundImage === "none") {
body.runtimeStyle.backgroundRepeat = "no-repeat";
body.runtimeStyle.backgroundImage = "url(about:blank)";
}
body.runtimeStyle.backgroundAttachment = "fixed";
}

再創(chuàng)建定位層：
代碼如下:
layer = document.createElement("");

定位層還要設(shè)置"overflow:hidden"，好處是不會(huì)因彈出層在document原來(lái)的范圍外而自動(dòng)擴(kuò)大document。
ie6測(cè)試以下代碼，document會(huì)隨著下滾而不斷擴(kuò)大：
代碼如下:






fixable

加上"overflow:hidden"就可以防止這種情況。

然后彈出層通過append方法修改為"absolute"定位，并插入到這個(gè)定位層，這樣就能實(shí)現(xiàn)fixed效果了。

由于這個(gè)定位層比較耗資源，所以在有元素插入時(shí)才會(huì)插到body中。
在不需要fixed的時(shí)候，要用remove方法從定位層中移除，當(dāng)定位層內(nèi)沒有需要定位元素就會(huì)自動(dòng)從body移除。
ps：隱藏的話expression還會(huì)繼續(xù)執(zhí)行，要移出文檔才行。

【居中效果】

加入居中擴(kuò)展程序，并且設(shè)置center為true，就會(huì)自動(dòng)相對(duì)窗口居中。
居中的原理跟仿Lightbox效果是一樣的，通過設(shè)置負(fù)的元素尺寸一半的margin和"50%"的top/left來(lái)居中。
要注意的是不是使用fixed定位時(shí)，計(jì)算需要加上scrollTop/scrollLeft。

【覆蓋層】

在仿Lightbox效果中，ie6的覆蓋層是通過創(chuàng)建一個(gè)覆蓋整個(gè)頁(yè)面的層來(lái)做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆蓋層是由AlertBox擴(kuò)展而來(lái)，它其實(shí)就是一個(gè)大小跟窗口一樣，并且跟窗口重合的彈出層。
由于覆蓋層一般只需要定義一個(gè)就行了，這里把它做成一個(gè)OverLay對(duì)象，使用時(shí)直接調(diào)用它的show和close方法。

【遮蓋select】

在仿Lightbox效果中介紹過兩種遮蓋select的方法：隱藏和iframe。
程序是通過iframe來(lái)遮蓋的，放在ie6的兼容擴(kuò)展程序中。
在iframe定位時(shí)要注意，要定位到彈出層的負(fù)的clientTop/clientLeft，這樣才能保證邊框不會(huì)被遮住。

使用技巧

【定位】

除了居中，程序會(huì)按照彈出層本身的定位樣式來(lái)顯示。
不是fixed定位時(shí)要注意，在ie6是相對(duì)當(dāng)前窗口來(lái)定位的，其他都是相對(duì)第一屏窗口來(lái)定位的。
還要注意，必須聲明DOCTYPE，才能正確定位。
程序?yàn)榱吮M量通用，降低了效率（用了4個(gè)expression），所以最好還是根據(jù)實(shí)際情況自己來(lái)調(diào)整。
ps：需要像定位提示效果那樣預(yù)設(shè)定位的話，可以自行擴(kuò)展。

【鎖定鍵盤】

使用覆蓋層時(shí)，為了防止用戶通過鍵盤操作頁(yè)面，可以在document的keydown中執(zhí)行preventDefault來(lái)禁用。
如果彈出層需要正常操作，只要在彈出層的keydown中執(zhí)行stopPropagation就行了。

【拖動(dòng)彈窗】

這里只是簡(jiǎn)單的加上拖動(dòng)功能，要注意的是fixed定位時(shí)，計(jì)算拖動(dòng)的參考對(duì)象是不同的。
更詳細(xì)的拖動(dòng)介紹可以看看這個(gè)拖動(dòng)效果。

使用說明

實(shí)例化時(shí)，必須有彈出層作為參數(shù)：

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->new AlertBox("idBox");

可選參數(shù)用來(lái)設(shè)置程序的默認(rèn)屬性，包括：
屬性: 默認(rèn)值//說明
fixed: false,//是否固定定位
zIndex: 1000,//層疊數(shù)
onShow: $$.emptyFunction,//顯示時(shí)執(zhí)行
onClose: $$.emptyFunction//關(guān)閉時(shí)執(zhí)行

還提供了以下方法：
show：顯示彈出層；
close：隱藏彈出層；
dispose：銷毀程序。

加入兼容ie6擴(kuò)展程序后，會(huì)自動(dòng)修正ie6的fixed問題，可根據(jù)fixSelect屬性設(shè)置是否修正select遮蓋bug，默認(rèn)是。
加入居中擴(kuò)展程序后，可根據(jù)center屬性設(shè)置是否居中，默認(rèn)否。

RepairFixed修正fixed對(duì)象，可獨(dú)立使用，有append和remove方法添加和移除需要fixed的元素，只能在ie6使用。
OverLay覆蓋層對(duì)象，有如下屬性：
屬性: 默認(rèn)值//說明
"color": "#fff",//背景色
"opacity": .5,//透明度(0-1)
"zIndex": 100,//層疊值
還有show和close方法顯示和隱藏覆蓋層。

打包下載地址

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com