JQuery pop-up window always centered in detail case

On the internet to check a lot is not inconsistent is the effect is not good, so I summed up to solve this problemprinciple:FAQ: Pop-up layer is centered, the background is translucent but found a pull scroll bar immediately revealed that the background is only set the screen, the other parts are the original appearance, and the pop-up layer because the scroll bar movement is missing this is the most popular pop-up layer on the Internet to solve the problem, There are three kinds of 1. Using the IE6 vulnerability, _top and using CSS expresstion expression advantages: No jitter, by calculating the location, most browsers can use the disadvantage: CSS expresstion is not recommended because when doing any event CSS Expression will call the JS method to recalculate the results, there are 1000 times/second, when the page element many rendering effect is very poor background layer, the style of the pop-up layer willposition:fixed;

Change into

position:fixed!important;/* FF ie7*/position:absolute;/*ie6*/_top:expression (eval (Document.compatmode &&            document.compatmode== ' Css1compat ')?            Documentelement.scrolltop + (Document.documentelement.clientheight-this.offsetheight)/2:/*IE6*/            Document.body.scrollTop + (Document.body.clientheight-this.clientheight)/2);/*IE5 ie5.5*/

2.js Method Recalculation Location

$ (function () {$ (window). Scroll (function () {  //browser scroll bar is invalid;  $ (window). scrolltop (0);    var offset = $ (window). offset ();  var position = $ (window). position ();  $ ("#div_pop"). CSS ("Top", $ (window). scrolltop () +$ (window). Outerheight ()/3);   The height of the scrollbar movement + One-third $ ("#div_back") of the browser height (calculated outer box). CSS ("height", $ (window). scrolltop () +$ (window). Outerheight ()); })  //The height of the background layer, the height of the scroll bar movement + the height of the browser (calculate the outer frame)

Advantages to solve the CSS expression of a large number of elements render slow problem chrome is not a problem, ie will jitter because the height of the scroll bar calculation, delay caused the pop window jitter (the effect is very unfriendly) 3. Fixed scrollbar keeps the pop-up layer centered using the scrollbar event to fix the scrollbar has been 0

$ (function () {$ (window). Scroll (function () {  //browser scroll bar is invalid;  

Pros: The Scorll method of jquery is compatible with most browsers it is important to shield onkeypress from the top and bottom of the scroll bar movement and then talk about JS lock scroll bar can refer to

<script> var Firefox = navigator.userAgent.indexOf (' Firefox ')! =-1; function MouseWheel (e) {///to img down mouse roll, block window scrolling e = e | | window.event; if (e.stoppropagation) e.stoppropagation (); Else e.ca Ncelbubble = true; if (E.preventdefault) E.preventdefault (); else E.returnvalue = false; Other code} window.onload = function () {var img = document.getElementById (' img '); Firefox img.addeventlistener (' dommouses Croll ', MouseWheel, False): (Img.onmousewheel = MouseWheel); } </script><div style= "height:100px" ></div>  <div style=" height:1000px "></div>

Scroll bar event Onmousewhell Iedommousescroll FF specific instructions see this link

JavaScript Mouse wheel scrolling events

But this method with onkeypress up and down keys will be invalid if you want to perfect can be added to the upper and lower key monitoring and the following method directly using Position:fixed relative to the browser offset to solve all the above problems but note the following 3 points: 1.<! DOCTYPE html> must write, set the browser to parse the HTML version of the specific analysis can be seen to explain the blog2.set a layer with transparent backgroundz-index:9998;//Layer Settingsopacity:0.5;//ie6 's TransparencyFilter:alpha (opacity=50);//ie6 above the transparent-moz-opacity:0.5; Firefox transparency3. Set up a pop-up layerz-index:9998;//Layer SettingsPop-up layer, the background layer of the position are fixed3. Click on the button to show it or hide it.

<! DOCTYPE html>

JQuery pop-up window always centered in detail case