在藍色理想看到一個漂亮的彈出層,不過看不慣其代碼,決定自己重寫一個。漂亮是有代價,它用了許多圖片,而且那是半透明圖片,這在IE6中就遇到麻煩,需要動用IE的DXImageTransform.Microsoft.AlphaImageLoader來實現fixbug!對于我而言,圖片根本是沒有必要,因為我掌握非常先進的動態生成圖片(位圖)的技術,這樣就可以大大減少請求數與圖片對服務器的壓力。但是,該死的IE6不支持這種技術,因此我還是需要一些圖片。至于半透明與圓角與陰影,我是利用vml與canvas與CSS3高級特征來實現。好了,開場白就此打住,我們開始吧。
通常而言,彈出窗口都是居中對齊的,因此我們需要獲取瀏覽器可視區的大小。這里有一個函數,可以幫我們迅速取得結果。
var getBrowserWindowSize = function(){
var de = document.documentElement;
return {
'width':(
window.innerWidth
|| (de && de.clientWidth )
|| document.body.clientWidth),
'height':(
window.innerHeight
|| (de && de.clientHeight )
|| document.body.clientHeight)
}
}
it知識庫:一步步教你實現彈出窗口(第1部分),轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。