试图将JS弹出窗口放置在页面中心？

Question

我已经在这个网站的弹出窗口居中，但是，它只在x轴上。我也需要将它集中在y轴上，但我似乎无法实现。

这里是JavaScript的...

function toggle(div_id) { 
    var el = document.getElementById(div_id); 
    if (el.style.display == 'none') { el.style.display = 'block';} 
    else {el.style.display = 'none';} 
} 

function blanket_size(popUpDivVar) { 
    if (typeof window.innerWidth != 'undefined') { 
     viewportheight = window.innerHeight; 
    } else { 
     viewportheight = document.documentElement.clientHeight; 
    } 
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { 
     blanket_height = viewportheight; 
    } else { 
     if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { 
      blanket_height = document.body.parentNode.clientHeight; 
     } else { 
      blanket_height = document.body.parentNode.scrollHeight; 
     } 
    } 
    var blanket = document.getElementById('blanket'); 
    blanket.style.height = blanket_height + 'px'; 
    var popUpDiv = document.getElementById(popUpDivVar); 
    popUpDiv_height=blanket_height/2-200;//200 is half popup's height 
    popUpDiv.style.top = popUpDiv_height + 'px'; 
} 
function window_pos(popUpDivVar) { 
    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerHeight; 
    } else { 
     viewportwidth = document.documentElement.clientHeight; 
    } 
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { 
     window_width = viewportwidth; 
    } else { 
     if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { 
      window_width = document.body.parentNode.clientWidth; 
     } else { 
      window_width = document.body.parentNode.scrollWidth; 
     } 
    } 
    var popUpDiv = document.getElementById(popUpDivVar); 
    window_width=window_width/2-200;//200 is half popup's width 
    popUpDiv.style.left = window_width + 'px'; 
} 
function popup(windowname) { 
    blanket_size(windowname); 
    window_pos(windowname); 
    toggle('blanket'); 
    toggle(windowname);  

} 

我认为这将这项工作...

popUpDiv_height=blanket_height/2-200;//200 is half popup's height 

，但事实并非如此。有想法该怎么解决这个吗？

编辑：这是链接到站点here。

这里是归因于这个弹出所有的CSS ...

#blanket { 
    background-color:#111; 
    opacity: 0.65; 
    filter: alpha(opacity=65) 
    *background:none; 
    position:absolute; 
    z-index: 9001; 
    top:0px; 
    left:0px; 
    width:100%; 
} 

#popUpDiv { 
    position:absolute; 
    background-image:url(../images/popup_bg.png); 
    background-repeat:no-repeat;  
    top:50%; 
    left: 50%; 
    width:400px; 
    height:400px; 
    margin-top: -120px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */ 
    border:5px solid #000; 
    z-index: 9002; 
} 


#popUpDiv .close { 
    background-image: url(../images/x.png); 
    background-repeat: no-repeat; 
    position:absolute; 
    top:10px; 
    right:10px 
} 

Answer 1

你可以像这样用CSS实现这一点：

HTML

<div id="popUpDiv"> 
    Your content here 
</div> 

CSS

#popUpDiv { 
    position:absolute; 
    background-image:url(../images/popup_bg.png); 
    background-repeat:no-repeat;  
    top:50%; 
    width:400px; 
    height:400px; 
    margin: -200px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */ 
    border:5px solid #000; 
    z-index: 9002; 
} 

总之，如果您使用此方法，您可能只需要使用javascript来动态设置高度和边距顶部值，具体取决于您当前的div及其内容。

更多的信息在这里：http://blog.themeforest.net/tutorials/vertical-centering-with-css/