Preface: The company project needs to use a pop-up frame to vertically center. Similar vertical centering pop-up layers on the Internet are similar. Because the project is based on Jquery, use $(window).height()-layer.height())/2 +$(document).scrollTop() to obtain the vertical displacement. I tested all kinds of browsers without any problem. After the background personnel moved the value to the project, there was a problem. When the page exceeded one screen, under chrome and FF, the pop-up box was not centered vertically in the current screen, but centered relative to the entire web page.
After reviewing information from all parties, all conclusions indicate:
1. Window height, $(window).height()
2. Document height, $(document).height()
3. The height of the rolled up, $(window).scrollTop()
Find the reason : Then, I found that the page of the backend personnel did not have DOCTYPE, so in chrome, $(window).height()=$(document).height(), $(document).height() means that when the actual content height of the web page is not full of one screen, it means the height of the entire window (the value will change when the window is enlarged and reduced). When the page exceeds one screen, it is expressed as the actual height of the entire web page content. There is no objection to this, and it has no effect on whether or not to set DOCTYPE. However: $(window).height() is in transitional.dtd, regardless of whether the actual height of the web page content exceeds the full screen or not, it is equal to the height of the entire window (the value will change when the window is enlarged and reduced). If DOCTYPE is not set, $(window).height()=$(document).height(). That is, when the content exceeds one screen, $(window).height() is the actual height of the web page, which is not what is said to be equal to the window height.
Solution:
s To obtain the height of the window, you can only make corresponding changes based on DOCTYPE. If DOCTYPE is not set, the following processing will be done.
if($(document).height()>=$(window).height()){ _windowHeight=document.body.clientHeight; }else{//alert($(window).height()); _windowHeight=$(document).height(); };When DOCTYPE is set to transitional.dtd, windowHeight=$(window).height()
The above brief discussion on the impact of DOCTYPE on the value of $(window).height() is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.