AlertBox 弹出层（信息提示框）效果
彈出層（彈窗）就是相對文檔或窗口定位的一個層，一般用來顯示提示信息、廣告等內容，還可以配合覆蓋層來鎖定頁面。
在仿Lightbox效果中，已經基本實現了這個效果，這次主要改進了ie6在fixed時的抖動問題。
此外，還增加了一個用來兼容ie6的fixed的方法，覆蓋層也重新“包裝”，程序也改成組件的結構。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
效果預覽
AlertBox
右下角消息框 關閉 關閉 點擊拖動
?
程序說明
【實現原理】
彈出層的基本原理在仿Lightbox效果中已經說的差不多了。
關鍵的地方就是定位，一般相對文檔的定位用absolute就行了。
要隨屏移動，即相對窗口定位，就用fixed定位。
這些實現起來都很簡單，除了不支持fixed的ie6。
【兼容ie6的fixed】
由于ie6本身不支持fixed定位，只能模擬或取巧來間接實現。
最原始的方法是在window的scroll事件中不斷修正彈出層的位置。
后來有人發現還可以通過reflow“離奇”地實現。
但以上方法都有一個缺陷，滾動時彈出層會“發抖”，很不舒服（可以用緩動等來改善）。
想要不發抖，可以通過html和css的巧妙應用來實現，具體參考14px的介紹。?
原理是用一個容器代替body，然后對不會動的body絕對定位。
看來很完美，但有一個致命的問題，這個方法需要修改html結構，會影響到相關的一些東西，例如window的scroll事件等。
程序中用了另一個方法，通過body的背景和expression來實現，下面是一個兼容的fixed效果：
代碼 <!DOCTYPE?html><html>
<head>
<style>
body?{
????_background:?url(about:blank)?fixed;
}
.fixable?{
????position:fixed;
????top:100px;
????_position:absolute;
????_top:expression((document).documentElement.scrollTop+100);
}
</style>
</head>
<body?style="height:1500px;">
<div?class="fixable">fixable</div>
</body>
</html>
相比前面的方法，這個是比較完美的了，但也有一些問題，例如body的背景只能用fixed，使用expression資源消耗相對較大。
更大的問題是不能實現用百分比值或right/bottom來定位。
為了解決這個問題，程序使用了一個定位層，這個層用上面的方法實現fixed定位，尺寸跟窗口大小一樣，并且位置重合，那么只要用一般的定位方法相對這個層定位，就能達到相對窗口定位的效果了。
兼容程序主要在RepairFixed對象中，首先設置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";
}
再創建定位層：
代碼 layer?=?document.createElement("<div?style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");定位層還要設置"overflow:hidden"，好處是不會因彈出層在document原來的范圍外而自動擴大document。
ie6測試以下代碼，document會隨著下滾而不斷擴大：
<html>
<head>
<style>
body?{
????_background:?url(about:blank)?fixed;
}
.fixable?{
????position:absolute;
????top:expression((document).documentElement.scrollTop+(document).documentElement.clientHeight);
}
</style>
</head>
<body>
<div?class="fixable">fixable</div>
</body>
</html>
加上"overflow:hidden"就可以防止這種情況。
然后彈出層通過append方法修改為"absolute"定位，并插入到這個定位層，這樣就能實現fixed效果了。
由于這個定位層比較耗資源，所以在有元素插入時才會插到body中。
在不需要fixed的時候，要用remove方法從定位層中移除，當定位層內沒有需要定位元素就會自動從body移除。
ps：隱藏的話expression還會繼續執行，要移出文檔才行。
【居中效果】
加入居中擴展程序，并且設置center為true，就會自動相對窗口居中。
居中的原理跟仿Lightbox效果是一樣的，通過設置負的元素尺寸一半的margin和"50%"的top/left來居中。
要注意的是不是使用fixed定位時，計算需要加上scrollTop/scrollLeft。
【覆蓋層】
在仿Lightbox效果中，ie6的覆蓋層是通過創建一個覆蓋整個頁面的層來做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆蓋層是由AlertBox擴展而來，它其實就是一個大小跟窗口一樣，并且跟窗口重合的彈出層。
由于覆蓋層一般只需要定義一個就行了，這里把它做成一個OverLay對象，使用時直接調用它的show和close方法。
【遮蓋select】
在仿Lightbox效果中介紹過兩種遮蓋select的方法：隱藏和iframe。
程序是通過iframe來遮蓋的，放在ie6的兼容擴展程序中。
在iframe定位時要注意，要定位到彈出層的負的clientTop/clientLeft，這樣才能保證邊框不會被遮住。
使用技巧
【定位】
除了居中，程序會按照彈出層本身的定位樣式來顯示。
不是fixed定位時要注意，在ie6是相對當前窗口來定位的，其他都是相對第一屏窗口來定位的。
還要注意，必須聲明DOCTYPE，才能正確定位。
程序為了盡量通用，降低了效率（用了4個expression），所以最好還是根據實際情況自己來調整。
ps：需要像定位提示效果那樣預設定位的話，可以自行擴展。
【鎖定鍵盤】
使用覆蓋層時，為了防止用戶通過鍵盤操作頁面，可以在document的keydown中執行preventDefault來禁用。
如果彈出層需要正常操作，只要在彈出層的keydown中執行stopPropagation就行了。
【拖動彈窗】
這里只是簡單的加上拖動功能，要注意的是fixed定位時，計算拖動的參考對象是不同的。
更詳細的拖動介紹可以看看這個拖動效果。
【遮蓋flash】
有時顯示出即使設置了zIndex也會被flash遮住，只要給flash添加一個wmode屬性設置其值為transparent，即把flash設置透明就行了。
使用說明
實例化時，必須有彈出層作為參數：
new?AlertBox("idBox");
可選參數用來設置程序的默認屬性，包括：
屬性:?? ?默認值//說明
fixed:??false,//是否固定定位
zIndex:??1000,//層疊數
onShow:??$$.emptyFunction,//顯示時執行
onClose:?$$.emptyFunction//關閉時執行
還提供了以下方法：
show：顯示彈出層；
close：隱藏彈出層；
dispose：銷毀程序。
加入兼容ie6擴展程序后，會自動修正ie6的fixed問題，可根據fixSelect屬性設置是否修正select遮蓋bug，默認是。
加入居中擴展程序后，可根據center屬性設置是否居中，默認否。
RepairFixed修正fixed對象，可獨立使用，有append和remove方法添加和移除需要fixed的元素，只能在ie6使用。
OverLay覆蓋層對象，有如下屬性：
屬性:?? ?默認值//說明
"color":?"#fff",//背景色
"opacity":?.5,//透明度(0-1)
"zIndex":?100,//層疊值
還有show和close方法顯示和隱藏覆蓋層。
完整實例下載
?
轉載于:https://www.cnblogs.com/cloudgamer/archive/2010/10/11/AlertBox.html
總結
以上是生活随笔為你收集整理的AlertBox 弹出层（信息提示框）效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于 数据文件自增长 的一点理解
- 下一篇： flex与flash的交互