js彈出層永遠居中實現思路及代碼

2019-11-20 21:33:24

字體：大中小

來源：轉載

供稿：網友

彈出層窗口永遠居中

 
<script type="text/javascript"> 
var isIE=window.XMLHttpRequest?false:true; 
var aIsIE={}; 
window.onload=function(){ 
if(isIE){ 
window.onscroll=doIE; 
window.onresize=doIE; } 
function doIE(){ 
aIsIE.top=document.documentElement.scrollTop; 
aIsIE.left=document.documentElement.scrollLeft; 
var width=document.documentElement.clientWidth; 
var height=document.documentElement.clientHeight; 
var oDiv=document.getElementById("oneReply"); 
oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px'; 
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px'; </script> 

首先大家要了解一個不兼容的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”；結合來解決這一問題

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd"> 
< html xmlns="http://www.w3.org/1999/xhtml"> 
< head> 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
< title>圖勝前端工程師</title> 
< style type="text/css"> 
body,div{margin:0; padding:0;} 
#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;} 
< /style> 
< script type="text/javascript"> 
var isIE=window.XMLHttpRequest?false:true; 
var aIsIE={}; 
window.onload=function(){ 
if(isIE){ 
window.onscroll=doIE; 
window.onresize=doIE; } 
function doIE(){ 
aIsIE.top=document.documentElement.scrollTop; 
aIsIE.left=document.documentElement.scrollLeft; 
var width=document.documentElement.clientWidth; 
var height=document.documentElement.clientHeight; 
var oDiv=document.getElementById("a"); 
oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px'; 
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script> 
< /head> 
< body style="width:100%;"> 
< div id="a"></div> 
< br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
< /body> 
< /html> 