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

彈出層視窗永遠居中

複製程式碼 程式碼如下:

程式碼如下:

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。

我們下面來共同學習它們的不同的用法，在學習中我們應該去思考在什麼佈局情況下，應該使用它們其中的哪一種。
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;








;
;
;

>
;
;

;
;
;
;
>
;