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

js pop-up layer is always centered implementation ideas and code_javascript skills

WBOY

Release： 2016-05-16 17:11:43

Original

1084 people have browsed it

The pop-up layer window is always centered

Copy code The code is as follows:

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

The Position attribute has four optional values, which are: 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 we encounter inheritance situations and we do not want to see it. The attributes inherited by the element affect itself, so you can use position:static to cancel the inheritance, that is, restore the default value of the element's positioning. For example: #nav { position:static; } The other two mentioned before, we mainly talk 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 pay special attention that IE6 does not support...

Here we use position:fixed; "hack technology" and "javascript"; combined to solve this problem
js pop-up layer is always centered implementation ideas and code_javascript skills

js pop-up layer is always centered implementation ideas and code_javascript skills

Copy code The code is as follows:

 
 
< html xmlns="http://www.w3.org/1999/xhtml"> 
< head> 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
< 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">

< br/>

< /body>
< /html>