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

Trying to place JS popup in center of page?

本文关键字：窗口 JS      更新时间：2023-09-26

我已经将弹出窗口放在了这个网站的中心位置，但它只在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

但事实并非如此。关于如何解决这个问题有什么想法吗？

编辑：这里有一个网站链接。

以下是此弹出窗口的所有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
}

你可以用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/

相关文章：