Javascript 当页面内容太大时，DIV不会在单击时显示，但当页面内容较少时，DIV会工作

我正在点击按钮弹出一个DIV。当页面内容小于1页时，将显示该页面。但当页面内容太大时，Div弹出窗口就不起作用了。请查找以下相关代码和快照。。。 需要帮助来解决这个问题

不幸的是，由于我的电脑存在安全问题，我无法将此内容上传到fiddle中。请将此内容以.html格式保存在本地并进行测试

页面内容较少时工作正常

Div在页面内容较大时不会弹出。。PFB快照

<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>

这是我的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>

#毛毯{
背景色：#111；
不透明度：0.65；
位置：固定；
z指数：9001；
/*九千以上*/
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
}
#验证弹出窗口{
位置：固定；
背景色：#eeeeee；
边框：5px实心#68ad0e；
宽度：300px；
高度：125px；
利润上限：-62px；
最高：50%；
左：50%；
左边距：-150px；
-moz边界半径：16px；
-webkit边界半径：16px；
边界半径：16px；
盒影：12px 0 15px-4px 000000，-12px 0 15px-4px 000000；
-moz盒阴影：12px 0 15px-4px 000000，-12px 0 15px-4px 000000；
-网络工具包盒阴影：12px 0 15px-4px 000000，-12px 0 15px-4px 000000；
z指数：9002；
}

这是我的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>

//登录验证功能。。。
函数拒绝\u验证（f\u名称）
{
var reject\u reason=文档。表单[f\u name]。reject\u reason；
if（拒绝\u reason.value.trim（））{
if（拒绝原因.value='Type reject reason Here'）{
document.getElementById（“validationMessage”）.innerHTML=“错误：请输入拒绝原因！”；
弹出（“validationPopup”）；
拒绝理由。焦点（）；
返回false；}
}
其他的
{
document.getElementById（“validationMessage”）.innerHTML=“错误：请输入拒绝原因！”；
弹出（“validationPopup”）；
拒绝理由。焦点（）；
返回false；}
}
功能切换（div_id）{
var el=document.getElementById（div_id）；
如果（el.style.display='none'）{el.style.display='block'；}
else{el.style.display='none'；}
}
函数大小（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口高度=window.innerHeight；
}否则{
视口高度=document.documentElement.clientHeight；
}
if（（viewportheight>document.body.parentNode.scrollHeight）和&（viewportheight>document.body.parentNode.clientHeight））{
毛毯高度=视口高度；
}否则{
if（document.body.parentNode.clientHeight>document.body.parentNode.scrollHeight）{
毯子高度=document.body.parentNode.clientHeight；
}否则{
毯子高度=document.body.parentNode.scrollHeight；
}
}
var blanket=document.getElementById（'blanket'）；
毛毯.style.height=毛毯_高度+px'；
var popUpDiv=document.getElementById（popupdivar）；
popUpDiv_高度=毛毯_高度/2-150；
//150是弹窗高度的一半
popUpDiv.style.top=popUpDiv_高度+'px'；
}
功能窗口位置（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口宽度=window.innerHeight；
}否则{
viewportwidth=document.documentElement.clientHeight；
}
if（（viewportwidth>document.body.parentNode.scrollWidth）和&（viewportwidth>document.body.parentNode.clientWidth））{
窗口宽度=视口宽度；
}否则{
if（document.body.parentNode.clientWidth>document.body.parentNode.scrollWidth）{
窗口宽度=document.body.parentNode.clientWidth；
}否则{
窗口宽度=document.body.parentNode.scrollWidth；
}
}
var popUpDiv=document.getElementById（popupdivar）；
窗宽=窗宽/2-150；
//150是弹出窗口宽度的一半
popUpDiv.style.left=窗口宽度+'px'；
}
功能弹出窗口（windowname）{
毛毯尺寸（窗口名称）；
窗口位置（窗口名称）；
开关（“毯子”）；
切换（窗口名）；
}

由于设置了