当页面内容太大时，不会在点击时显示DIV，但在页面内容较少时则不会显示

时间：2014-01-03 20:39:15

标签： javascript html css html5

我在点击按钮上弹出一个DIV。页面内容小于1页时显示。但是当页面内容太大时，Div Pop up无效。请在下面找到相关代码和快照...... 需要帮助来解决这个问题。

不幸的是，由于我的电脑出现安全问题，我无法将其上传到小提琴中，请将此内容保存在您当地的.html并测试...

页面内容较少时工作正常

enter image description here

当页面内容很大时，Div不会弹出.PFB快照

enter image description here

这是我的CSS 

<style type="text/css">

#blanket {
    background-color: #111;
    opacity: 0.65;
    position: fixed;
    z-index: 9001;
    /*above nine thousand*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#validationPopup {
    position:fixed;
background-color:#eeeeee;
    border:5px solid #68ad0e;
    width:300px;
    height:125px;
    margin-top:-62px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
}
</style>

这是我的HTML 

<div align="center">

<!--Validation Dialogue box popup-->
<div id="blanket" style="display:none;"></div>

<div id="validationPopup" style="display:none;">
</br>
<a href="javascript:void(0)" style="text-decoration:none;color:#060;" onclick="popup('validationPopup')"><div align="right">close[X]&nbsp;&nbsp;&nbsp;</div></a>
<br>
<div id="validationMessage" align="center"> </div>
</div>
<p>My Content goes here
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here </p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<p>My Content goes here</p>
<form id="Reject118" name="Reject118" method="post" action="#" onsubmit="return reject_validation(this.name);"><input type="submit" class="Reject" name="Reject" id="Reject" value="Reject" title="Click here to Reject this product item & send back for Moderator's Review"/>
          <br />
    <textarea name="reject_reason" id="reject_reason"  rows="3" cols="9" onblur="if(this.value == '') { this.value = 'Type Reject Reason Here';
this.style.color = '#8f8484';}" onfocus="if(this.value == 'Type Reject Reason Here'){ this.value = ''; this.style.color = '#8f8484';}" style="color:#8f8484;">Type Reject Reason Here</textarea>
</form>
</div>

这是我的Javascript 

<script type="text/javascript">    

//Login validation function...
function reject_validation(f_name)
{
var reject_reason=document.forms[f_name].reject_reason;

    if (reject_reason.value.trim()) {
        if(reject_reason.value=='Type Reject Reason Here'){
    document.getElementById("validationMessage").innerHTML="&nbsp;<font color='#FF0000'>Error: </font> Please Enter Reject Reason !";
    popup('validationPopup');
        reject_reason.focus();
        return false; } 
        }
        else
        {
    document.getElementById("validationMessage").innerHTML="&nbsp;<font color='#FF0000'>Error: </font> Please Enter Reject Reason !";
    popup('validationPopup');
        reject_reason.focus();
        return false; } 
}

        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-150;
    //150 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-150;
    //150 is half popup's width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}
</script>

2 个答案:

答案 0 :(得分：2)

由于您将位置设置为fixed，因此无需更改弹出窗口的top属性。摆脱popUpDiv.style.top = popUpDiv_height + 'px';。

<强> jsFiddle example

答案 1 :(得分：2)

你的CSS犯了小错误。无论页面内容的大小如何，这都将始终位于屏幕中间。

请看这个DEMO：http://jsfiddle.net/3GjpT/2/ 

#blanket {
    background-color: #111;
    opacity: 0.65;
    position: fixed;
    z-index: 9001;
    /*above nine thousand*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#validationPopup {
    position:fixed;
background-color:#eeeeee;
    border:5px solid #68ad0e;
    width:300px;
    height:125px;
    top: 50% !important;
    margin-top:-75px;
    left: 50% !important;
    margin-left:-150px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
}
相关问题
最新问题