Question

这是我希望我的弹出窗口看起来像的一个FIDDLE ...这很有效： http://jsfiddle.net/mib92/x6yev5a0/
（display都设置为：block;）并且显示完美。

当我在我的代码中运行它时，我使用JS脚本来执行弹出窗口。

我的HTML：

  <a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a> 

line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>

<!--POPUP-->    
<script type="text/javascript" src="css-pop.js"></script>

<div id="blanket" style="display:none;"></div>

<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')" class="popclose">Click to Close CSS Pop Up</a>
</div>  
<!-- END POPUP -->

我的CSS :(与没有display: block;的FIDDLE相同，因为它在HTML中设置为display:none;

#blanket {
background-color:#ff0024;
opacity: 0.65;
*background:none;
position:fixed;
z-index: 9001;
top:0px;
left:0px;
width:100%;
height:100%;
}

#popUpDiv {
 position:fixed;
 background-color:#ccc;
 width:400px;
 height:400px;
 border:5px solid #000;
 z-index: 9002;
 top:50%;
 left:50%;
 margin-left: -200px;
 margin-top: -200px;    
}

这是JS CODE：

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);     
}

我对JS代码的理解是#blanket和#popUpDiv将display:none;更改为display:block; ...但弹出窗口不会定位于像小提琴一样适当的地方？我不知道为什么...... JS中必定存在导致这种情况的东西......因为HTML＆amp; CSS正确定位弹出窗口......任何想法？

感谢

Answer 1

哦，我的...首先，你应该从css中删除它：

margin-left: -200px;
margin-top: -200px;

然后替换：

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

与此：

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

因为blanket_height - 它是页面的全高。而且你只需要视口的高度

使用javascript脚本定位CSS弹出窗口

1 个答案: