首頁 > web前端 > js教程 > 主體

js彈出層永遠居中實作思路及程式碼_javascript技巧

WBOY
發布: 2016-05-16 17:11:43
原創
1072 人瀏覽過

彈出層視窗永遠居中

複製程式碼 程式碼如下:


程式碼如下:


var height=document.documentElement.clientHeight;
var oDiv=document.getElementById("oneReply");
oiv.Istop. .top (height-oDiv.offsetHeight)/2 'px';
oDiv.style.left=aIsIE.left (width-oDiv.offsetWidth)/2 'px';


首先大家要了解一個不相容的css樣式position:fixed;

Position屬性有四個可選值,它們分別是:static、absolute、fixed、relative。

我們下面來共同學習它們的不同的用法,在學習中我們應該去思考在什麼佈局情況下,應該使用它們其中的哪一種。 js彈出層永遠居中實作思路及程式碼_javascript技巧
position:static 無定位該屬性值是所有元素定位的預設情況,在一般情況下,我們不需要特別的去聲明它,但有時候遇到繼承的情況,我們不願意見到元素所繼承的屬性會影響本身,因此可以用position:static取消繼承,也就是還原元素定位的預設值。如:#nav { position:static; } 其他兩種前面提過,我們 主要說的是fixed position:fixed 相對於視窗的固定定位這個定位屬性值是什麼意思呢?元素的定位方式同absolute類似,但它的包含塊是視區本身。在螢幕媒體如WEB瀏覽器中,元素在文件捲動時不會在瀏覽器視察中移動。例如,它允許框架樣式佈局。在頁式媒體如列印輸出中,一個固定元素會出現於第一頁的相同位置。這一點可用於產生流動標題或腳註。我們也看過相似的效果,但大都數效果不是透過CSS來實現了,而是應用了JS腳本。請特別注意,IE6不支援…
這裡我們用position:fixed; “hack技術” “javascript”;結合來解決這一問題 
 複製程式碼 程式碼如下:





圖勝招募工程師

正文,div{邊距: 0;填充:0;}
#a{寬度:200px;高度:200px;背景:藍色;位置:固定;左:50%;上:50%;左邊距:-100px;上邊距:- 100px ;_position:absolute;}


var isIE=window.XMLHttpRequest?false:true;
var aIE={};
window.onload=function(){
if(isIE){
window.onscroll=doIE;
window.onresize=doIE; }
函數doIE(){
aIsIE .top=document.documentElement.scrollTop;
aIsIE.left=document.documentElement.scrollLeft;
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientWidth;
var height=document.documentElement.clientWidth;
var height=documentcli. oDiv=document.getElementById("a");
oDiv.style.top=aIsIE.top(height-oDiv.offsetHeight)/2 'px';
oDiv.style.left=aIsIE.left(width -oDiv.offsetWidth)/2 'px';


div>



gt;








;
;
;

>
;



>


>



gt;








;
;
;

>
;
;

;
;
;
;
>
;

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板