js pop-up layer is always centered implementation ideas and code

Author：Eve Cole Update Time：2025-03-03 01:32:01

Pop-up window is always centered

Copy the code code as follows:

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>

First of all, everyone needs to understand an incompatible css style position:fixed;

The Position attribute has four optional values: static, absolute, fixed, relative.

Let's learn their different uses together. During the study, we should think about which one of them should be used under what layout situation.

position:static No positioning This attribute value is the default positioning of all elements. Under normal circumstances, we do not need to declare it specifically, but sometimes when encountering inheritance, we do not want to see the impact of the attributes inherited by the element. itself, so you can use position:static to cancel inheritance, that is, restore the default value of element positioning. For example: #nav { position:static; } The other two mentioned before, we are mainly talking about fixed position: fixed. What does the positioning attribute value mean relative to the fixed positioning of the window? The element is positioned similarly to absolute, but its containing block is the viewport itself. In screen media such as web browsers, elements do not move in the browser view as the document is scrolled. For example, it allows frame style layout. In page media such as printouts, a fixed element appears at the same position on the first page. This can be used to generate flowing titles or footnotes. We have seen similar effects, but most of them are not achieved through CSS, but using JS scripts. Please note that IE6 does not support...

Here we use position:fixed; + "hack technology" + "javascript"; to solve this problem

Copy the code code as follows:

<!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>Tusheng Front-end Engineer</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>

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>

< /body>

< /html>