Как в javascript “закрывать” div при клике вне этого дива?

278

15 сентября 2017, 22:59

При клике по некоторому элементу управления на экране появляется div c текстом подсказок. У дива есть кнопка "закрыть". Но хочется, чтобы он закрывался не только по клику на кнопку, но и вне области этого div'a. Подскажите, как это реализовать?

Answer 1

Вот красивое решение:

$(document).mouseup(function (e) {
    var container = $("YOUR CONTAINER SELECTOR");
    if (container.has(e.target).length === 0){
        container.hide();
    }
});

что означает следующее - если клик был по области, которая НЕ является нашим div'ом или не содержится в нем, то скрыть блок.

Это решает проблему, если клик был по элементу вложенному в блок (не по самому блоку). Элемент будет скрыт, только если клик по области ВНЕ div'a

Answer 2

Вот нашёл хороший ответ:

$(".button").click(function() { 
  $('.toggled_block').toggle(); 
}); 
$(document).on('click', function(e) { 
  if (!$(e.target).closest(".parent_block").length) { 
    $('.toggled_block').hide(); 
  } 
  e.stopPropagation(); 
});

.parent_block { 
  width: 200px; 
  height: 100px; 
} 
.button { 
  width: 200px; 
  height: 50px; 
  background: #00BB65; 
  border-radius: 5px; 
  overflow: hidden; 
} 
.toggled_block { 
  width: 200px; 
  height: 50px; 
  background: #fff; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  border: 1px solid #ccc; 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="parent_block"> 
  <div class="button"></div> 
  <div class="toggled_block"></div> 
</div>

Answer 3

document.onclick = function() { 
  document.getElementById('nav').style.display = 'none' 
}

#nav { 
  float: left; 
  width: 150px; 
  background: red; 
  height: 100px; 
}

<div id="nav"></div>

В данном случае обработчик повешен на документ, а можно - на родителя.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выбор области изображения по точкам

Интересует возможность реализации выделения области изображения по нескольким точкам, которые пользователь мышью будет ставитьАналог...

224

javascript

how to hide stackLabels for non column series type in Highchart js?

how to hide stackLabel for spline in this example Как скрыть вывод суммы для сплайна?

285

javascript

Сброс таймера js

Каким образом можно сбрасывать таймер? при нажатие закрыть уведомление (Close или Message)

282

javascript

Получить данные с сайта с помощью js

ПриветствуюЕсть в php функция - file_get_contents, которая читает содержимое файла в строку, которую можно дальше где-то использовать

260