Я хочу закрыть Div, когда я нажимаю на фоновый div (SearchBlur). Моя проблема, если я нажимаю на показанный div, он также закрывается.
Вот мой код javascript
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
Здесь мой HTML
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
Программа выглядит следующим образом: 
Я хочу закрыть всплывающее окно, когда я нажимаю на темном фоне
Извините за мой плохой английский: D
4 ответа
Используйте event.stopPropagation(); onclick нужного вам ребенка
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>Какой div ты пытаешься закрыть?
Из того, что я вижу, вы теряете div самого высокого уровня, поэтому вся разметка, вложенная в SearchBlur, также будет скрыта. Я предполагаю, что вы хотите нацелиться на более глубокий вложенный div, например:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}
В простой форме ваш HTML выглядит так:
<div class="blur">
<div class="popup"></div>
</div>
Ваш JS просто так:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Вот кодекс: https://codepen.io/alexmoronto/pen/xaKvxg
Попробуйте добавить слушателя к дочернему элементу с помощью следующего кода
event.stopPropagation();