要想實現彈窗的效果，首先應該建立乙個覆蓋層masklayer，以及乙個顯示層presentlayer。
其次，每次彈窗時（除首次彈窗外），masklayer的顯示以及隱藏不應該導致文件流的reflow，但是repaint不可避免。所以對於masklayer，用以display:absolute;
最為關鍵的就是顯示層的定位居中顯示，根據masklayer的高度和寬度計算出顯示層的位置。
另外，為了多樣性的支援彈窗的內容，該實現也提供了ajax抓取的相應功能，但具體並未測試，倉促做出的簡單測試也並不完美。
為了節約空間大小，直接將該頁面呈現。
doctype html
>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
html,body
#masklayer
#presentlayer
style
>
head
>
<
body
>
<
img
id="test"
src=""
width
="200"
height
="200"
>
<
script
>
document.queryselector(
'#test
').addeventlistener(
'click',
function
(),false
)
script
>
<
script
>
(function
(window)
if(!window.popup)
varpopup
={};
window.popup
=popup;
popup.u
=function
() scontent
=content;
sisajax
=isajax;
swidth
=width;
sheight
=height;
sauto
=auto;
this
.spread();
this
.preshow();
this
.filter(masklayer,80,
3,1);
if(timeout)
settimeout(that.hide,timeout
*1000
); },
load:
function
(content,isajax,width,height,auto)}};
xhr.open(
'get
',content,
true
); xhr.send(
null
); }
else
},hide:
function
(), process:
function
(content,width,height,auto)
else
this
.layout(prew,preh,width,height);}},
ajax:
function
(),function
(),
function
()];
for(
vari,len
=fns.length;i
<
len;i++)
catch
(e){}
}return
ajax();
},resize:
function
(),
//presentlayer 初始顯示
preshow:
function
(bgimg),
/*** @param bgimg
* 遮蓋層展開，設定height width
**/spread:
function
(bgimg),
//定位 presentlayer
position:
function
(), layout:
function
(prew,preh,width,height)
else
factorw
=finw
>
prew ?1
: -1;
factorh
=finh
>
preh ?1
: -1;
presentlayer.style.paddingbottom ='
10px';
presentlayer.style.paddingtop ='
10px';
presentlayer.style.paddingleft ='
10px';
presentlayer.style.paddingright ='
10px';
contentlayer.style.display =''
;
function
recurse()
}else
if(curh
==finh)
}else
that.position();
}timeid
=setinterval(recurse,
20);
},/**
* @param el
* @param opacity
* @param factor 每次迭代所增減的因子
* @param iod 增減性，取值為正負1. -1 則意味著透明度逐漸為零
*/filter:
function
(el,opacity,factor,iod)
varcurval =0
,that
=this
;
if(iod ==-
1)else
function
recurse()
else
el ===presentlayer
?that.filter(masklayer,0,
3,-1
):contentlayer.innerhtml =''
; }
}else
}el.uuid
=setinterval(recurse,
20);}};
}();
popup.p
=function
(), pageheight:
function
(), clientwidth:
function
(), clientheight:
function
() }
}();
})(window);
script
>
body
>
html
>
Jquery實現彈窗
window.html csdn歡迎您 哈哈哈哈哈哈哈 csdn歡迎您 哈哈哈哈哈哈哈 csdn歡迎您 哈哈哈哈哈哈哈 window.js 視窗的高度 var windowheight 視窗的寬度 var windowwidth 彈窗的高度 var popheight 彈窗的寬度 var popwi...
python實現祝福彈窗效果
中秋節，是中國傳統節日之一，為每年的農曆八月十五，也是我國僅次於春節的第二大傳統節日。傳說是為了紀念嫦娥。祝大家中秋快樂 中秋節，怎麼用python祝福大家節日快樂是乙個很頭疼的事，但是只要有它什麼都不是問題。接下來教大家怎麼用python獻上滿滿的祝福。首先給大家看一下最終模樣。注 密集恐懼症患者...
jbox彈窗 強大的jquery彈出層外掛程式jBox
jbox是一款功能強大的jquery彈出層外掛程式。jbox外掛程式可以用來建立tooltips提示框 模態視窗 畫廊等多種效果。使用方法 在頁面中引入jbox.all.min.css jquery和jbox.all.min.js檔案。建立tooltips html結構如下。hover me hov...