DIV не отображается при щелчке, когда содержимое страницы слишком велико, но работает, когда содержимое страницы меньше

Question

DIV не отображается при щелчке, когда содержимое страницы слишком велико, но работает, когда содержимое страницы меньше

0

Я нажимаю кнопку DIV. Он отображается, когда содержание страницы меньше 1 страницы. Но когда содержимое страницы слишком велико, Div Pop up не работает. Ниже приведен соответствующий код и моментальные снимки... Нужна помощь для решения этой проблемы.

К сожалению, я не мог загрузить это в скрипку из-за проблемы с безопасностью на моем компьютере, пожалуйста, сохраните этот контент в своем локальном формате.html и протестируйте его...

Работает отлично, когда содержимое страницы меньше

Div не появляется, когда содержимое страницы велико. Снимок PFB

Вот мой 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 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 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 width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}
</script>

logan 03 янв. 2014, в 21:53

Источник

1

Вы можете добавить jsfiddle?
geedubb 03 янв. 2014, в 20:40
0

@geedubb: К сожалению, я не смог загрузить это на скрипку из-за проблем с безопасностью на моем компьютере. Пожалуйста, сохраните этот контент на вашем локальном компьютере как .html и протестируйте его ...
logan 03 янв. 2014, в 20:43
0

Ваш расчет для popUpDiv_height является проблемой.
j08691 03 янв. 2014, в 20:43
0

вы должны использовать jqueryui или bootstrap
Vinz243 03 янв. 2014, в 20:45
0

@ j08691: пожалуйста, поправьте меня, где проблема?
logan 03 янв. 2014, в 20:45
2

Кстати, вы должны использовать <script type="text/javascript"> атрибут language="javascript" устарел.
rcorrie 03 янв. 2014, в 20:46
0

@RCorrie: я изменил это, но бесполезно ... Пожалуйста, обновите код
logan 03 янв. 2014, в 20:48
2

jsfiddle.net/j08691/YuGY7
j08691 03 янв. 2014, в 20:48
0

@ j08691: ты великолепен! пожалуйста, напишите как ответ и укажите, в чем проблема
logan 03 янв. 2014, в 20:49

Показать ещё 7 комментариев

Теги:

javascript

html

css

html5

2 ответа

2

Вы сделали небольшие ошибки с вашим CSS. Это всегда будет посередине экрана независимо от размера содержимого страницы.

Посмотрите на эту ДЕМО: 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;
}

dzeki 03 янв. 2014, в 18:26

0

подскажите пожалуйста у какой линии проблема и почему?
logan 03 янв. 2014, в 21:01

Ещё вопросы

@geedubb: К сожалению, я не смог загрузить это на скрипку из-за проблем с безопасностью на моем компьютере. Пожалуйста, сохраните этот контент на вашем локальном компьютере как .html и протестируйте его ...
Ваш расчет для popUpDiv_height является проблемой.
вы должны использовать jqueryui или bootstrap
@ j08691: пожалуйста, поправьте меня, где проблема?
Кстати, вы должны использовать <script type="text/javascript"> атрибут language="javascript" устарел.
@RCorrie: я изменил это, но бесполезно ... Пожалуйста, обновите код
@ j08691: ты великолепен! пожалуйста, напишите как ответ и укажите, в чем проблема
подскажите пожалуйста у какой линии проблема и почему?

j08691 · Accepted Answer · 2014-01-03T18-27-00.000Z

Вам не нужно менять верхнее свойство всплывающего окна, так как вы устанавливаете фиксированное положение. Просто избавитесь от popUpDiv.style.top = popUpDiv_height + 'px'; ,

Пример jsFiddle