js彈出層永遠(yuǎn)居中實(shí)現(xiàn)思路及代碼

2024-05-06 15:56:35

字體：大中小

供稿：網(wǎng)友

彈出層永遠(yuǎn)居中的方法有很多，在本文為大家詳細(xì)介紹下使用js是如何輕松實(shí)現(xiàn)的，喜歡的朋友可以參考下

彈出層窗口永遠(yuǎn)居中

復(fù)制代碼代碼如下:

首先大家要了解一個(gè)不兼容的css樣式position:fixed;

Position屬性有四個(gè)可選值，它們分別是：static、absolute、fixed、relative。

我們下面來(lái)共同學(xué)習(xí)它們的不同的用法，在學(xué)習(xí)中我們應(yīng)該去思考在什么布局情況下，應(yīng)該使用它們其中的哪一種。

position:static　無(wú)定位該屬性值是所有元素定位的默認(rèn)情況，在一般情況下，我們不需要特別的去聲明它，但有時(shí)候遇到繼承的情況，我們不愿意見(jiàn)到元素所繼承的屬性影響本身，從而可以用position:static取消繼承，即還原元素定位的默認(rèn)值。如：#nav { position:static; } 其他兩種前面提過(guò)，我們主要說(shuō)的是fixed position:fixed　相對(duì)于窗口的固定定位這個(gè)定位屬性值是什么意思呢？元素的定位方式同absolute類似，但它的包含塊是視區(qū)本身。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動(dòng)時(shí)不會(huì)在瀏覽器視察中移動(dòng)。例如，它允許框架樣式布局。在頁(yè)式媒體如打印輸出中，一個(gè)固定元素會(huì)出現(xiàn)于第一頁(yè)的相同位置。這一點(diǎn)可用于生成流動(dòng)標(biāo)題或腳注。我們也見(jiàn)過(guò)相似的效果，但大都數(shù)效果不是通過(guò)CSS來(lái)實(shí)現(xiàn)了，而是應(yīng)用了JS腳本。請(qǐng)?zhí)貏e注意，IE6不支持……

這里我們用position:fixed；+ “hack技術(shù)” +“javascript”；結(jié)合來(lái)解決這一問(wèn)題

復(fù)制代碼代碼如下:

<!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>
< div></div>
 
< /body>
< /html>