Я хочу закрыть 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

0
Hurricane08 20 Авг 2018 в 12:03

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>
1
לבני מלכה 20 Авг 2018 в 09:22

Какой div ты пытаешься закрыть?

Из того, что я вижу, вы теряете div самого высокого уровня, поэтому вся разметка, вложенная в SearchBlur, также будет скрыта. Я предполагаю, что вы хотите нацелиться на более глубокий вложенный div, например:

function closePopup(){
   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.div_container').fadeOut("normal");
        counter = 0;
    }
}
0
Ben Evans 20 Авг 2018 в 09:09

В простой форме ваш 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

0
Alexander N. Morgunov 20 Авг 2018 в 09:35

Попробуйте добавить слушателя к дочернему элементу с помощью следующего кода

event.stopPropagation();
1
ivooQ 20 Авг 2018 в 09:11
51927371