Помогите с закрытием всплывающего окна Javascript - PullRequest
Новая
       2

Помогите с закрытием всплывающего окна Javascript

0 голосов
/ 15 августа 2011

Могу ли я получить помощь по исправлению кода ниже? Вы можете просто скопировать и вставить и попробовать сами. После этого появляется всплывающее окно div. Если я нажму (X), всплывающее окно div должно закрыться, но это не так. Только двойной щелчок (X) закрывает всплывающее окно div. При этом всегда должно отображаться всплывающее окно div. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>

<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39"  style="display:none;"><div class="close"><a href="javascript:closead(39)">X</a></div></div>
<input type="text" value="1" id="ad39" />
</div>


<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close"><a href="javascript:closead(40)">X</a></div></div>
<input type="text" value="1" id="ad40" />
</div>

<script type="text/javascript">

function getad(number) {

    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "none") {
        document.getElementById(number).style.display = "block";

        }
    }

} 

function hidead(number) {

    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";

        }
    }
} 

function closead(number) {

    document.getElementById('ad'+number).value = 0;
    if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";

        }



    }

    function changeback(number) {

    if(document.getElementById('ad'+number).value==0) {


    document.getElementById('ad'+number).value = 1;

    }
    }
</script>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 15 августа 2011

Вы ошиблись: 

<div class='advert' id="39"  style="display:none;">
<div class='advert' id="40" style="display:none;">

должно быть: 

<div class='advert' id="ad39"  style="display:none;">
<div class='advert' id="ad40" style="display:none;">
0 голосов
/ 15 августа 2011

Проблема не в том, что ваше объявление не удаляется.Для того, чтобы щелкнуть ссылку, которая запускает функцию hidead (), необходимо также навести курсор мыши на div, который вызывает getad () при наведении курсора.

Так что же на самом деле выполняется, если вы переходитедействия таковы.

Событие Click вызывает метку для закрытия «число X» (число) и выполняет его код.Событие Mouseout запускается и распространяется на родительское убежище (число), которое запускается и выполняется.Событие Mouseover запускается и распространяется на родительский getad (число), которое запускается и выполняется.

Таким образом, ваше событие выгружается, а затем сразу же перезагружается.Возможно, если бы вы могли предоставить некоторый контекст, мы могли бы помочь вам сделать это работоспособным.Я не уверен, при каких обстоятельствах вы хотите загрузить объявление при наведении мыши, скрыть его при наведении мыши и дать пользователю кнопку закрытия.Это просто кажется большой загрузкой / выгрузкой / перепрошивкой контента, который будет раздражать вашего посетителя больше, чем просто статичное объявление, которое загружается каждые X секунд через AJAX или что-то в этом роде.

0 голосов
/ 15 августа 2011

Я попробовал ваш код в Firefox, и он работает.

В IE8 он не работает.

Это основная причина, почему вы никогда не должны писать нативный Javascript ...

Используйте JQuery или другую платформу JS.

Во-первых, это сделает ваш код кросс-браузерным совместимым.Во-вторых, только 1 строка кода будет делать то, что вам нужно; -)

Что-то вроде $ (# 39) .hide () или $ (# 39) .show ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...