Javascript «закрыть кнопку» не работает

Question

Сегодня я попытался сделать простую кнопку закрытия в javaScript. К сожалению, он не работает. Вот как это выглядит следующим образом:

<div id="popup_bg"> 
<div id="popup_window"> 
<span id="popup_close"> 
</span> 
</div> 
</div> 

и код JS является:

<script type=”text/javascript”> 
     $("#popup_close").click(function() { 
     $("#popup_bg").fadeOut(); 
     event.stopPropagation(); 
     }); 
</script> 

Я хотел бы также сделать его применить к любой из этих «всплывающих окон», поэтому я, наверное, изменить my это что-то вроде $ (this) .parent(). parent(). fadeOut(); - можно ли это сделать?

Спасибо за помощь, ребята! :)

@EDIT

Как ни один из ваших решений не работать, я разместить код в буквальном смысле: D Может быть, вы найдете какие-то ошибки, что делает его из строя:

<?php if(isset(errors['user'])) : ?>  
<script type="text/javascript"> 
    $(function() 
    { 
     $("#popup_close").on('click', function() { 
     $("#popup_background").fadeOut(); 
     //event.stopPropagation(); 
     }); 
    }); 
</script> 
<div id="popup_background" > 
    <div class="popup_window"> 
     <span class="title"> 
     error 
     </span> 
     <span class="message"><?php echo errors['user']; ?> 
     </span> 
     <span id="popup_close" class="button">OK</span> 
    </div> 
</div> 
<?php endif; ?> 

Я надеюсь, что будет help Вы обнаружите ошибки. Он показывает правильно, я нажимаю на мой «OK» пролет, ничего не происходит: р Я ненавижу ЯША: D

Answer 1

Я видел ваш код, часть jquery код работает .. Проверьте здесь: Jsfiddle ->http://jsfiddle.net/Zahinize/7YD4D/13/

Вы должны переписать условное Если заявление, как это,

<? ini_set('error_reporting', E_ALL); ?> 

<script type="text/javascript"> 
    $(function() 
    { 
    $("#popup_close").on('click', function() { 
    $("#popup_background").fadeOut(); 
    //event.stopPropagation(); 
    }); 
    }); 
    </script> 

<div id="popup_background" > 
    <div class="popup_window"> 
    <span class="title"> 
    error 
    </span> 
    <span class="message"> 

    <?php 
    if(isset(errors['user'])){  
     echo errors['user']; 
     } 
    ?> 
    </span> 
    <span id="popup_close" class="button">OK</span> 
    </div> 
</div> 

набор error_reporting в том, что сверху ..

Подробнее здесь: http://php.net/manual/en/function.error-reporting.php

Возможно, это помогло бы, но, откровенно говоря, я не видел обработки ошибок следующим образом: error ['user'] в любом месте .. вы должны увидеть обработку ошибок для написания лучшего кода;)

Answer 2

идентификаторов должны уникальным, вы должны использовать классы вместо:

<div class="popup_bg"> 
    <div class="popup_window"> 
     <span class="popup_close"></span> 
    </div> 
</div> 

Тогда для выбора целевого родителя нажатая элемент, который можно использовать closest метод:

$(function() { 
    $(".popup_close").click(function(event) { 
     $(this).closest(".popup_bg").fadeOut(); 
     // event.stopPropagation(); 
    }); 
}); 

Обратите внимание, что в коде event является undefined вы должны передать объект события в обработчик.

Answer 3

Добавить document.ready и/или использовать .on функции

<script type=”text/javascript”> 
    $(function(){ 
     $("#popup_close").on('click', function() { 
      $("#popup_bg").fadeOut(); 
      event.stopPropagation(); 
     }); 
    }); 
</script> 

Кроме того, идентификаторы не может повторяться в документе, используйте другой селектор, как класс

Answer 4

Если есть более чем один Всплывающие лучше использовать класс вместо от id.

Пример.

$(function() 
{ 
    $(".popup_close").on('click',(function() 
    { 
     $(this).parents("div.popup_bg").fadeOut(); 
    }); 
}); 

И HTML

<div class = "popup_bg"> 
    <div class = "popup_window"> 
     <span class = "popup_close"></span> 
    </div> 
</div> 

Answer 5

Вам необходимо некоторое содержание в вашем пролете или установить высоту и с. Тогда вы сможете щелкнуть по нему, и он будет работать. Избегайте трюков с parent().parent(), это может сломаться, если вы измените структуру div. Как утверждают другие, используйте готовый документ jquery (читайте учебник) и используйте классы не ids, если вы собираетесь повторно использовать код (читайте учебник по CSS) ...