Pop-up Layer window always centered
Copy Code code as follows:
<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>
First of all, we want to understand an incompatible CSS style position:fixed;
The Position property has four optional values: Static, absolute, fixed, relative.
We are going to learn the different uses of them together, and in learning we should think about which of these should be used in the layout.
Position:static The property value is the default for all elements to be positioned, and in general, we do not need to declare it specifically, but sometimes we encounter inheritance, we do not want to comment on the attributes that the element inherits, so we can use the position: Static cancels inheritance, which is the default value that the Restore element locates. For example: #nav {position:static;} The other two mentioned earlier, we are mainly talking about fixed position:fixed relative to the location of the window of the positioning of the value of the attribute what does it mean? The element is positioned in a similar way to absolute, but its containing block is the viewport itself. In screen media such as Web browsers, elements do not move through browser inspections when the document scrolls. For example, it allows a frame style layout. A fixed element appears in the same position on the first page in the page-type media, such as print output. This can be used to generate a flow title or footnote. We have seen similar effects, but most of the effect is not achieved through CSS, but the use of JS script. Please pay special attention to IE6 not support ...
Here we use the position:fixed;+ "hack technology" + "JavaScript", combined to solve this problem
Copy 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> 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>
< 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>
< 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>
