jQuery: клик вне элемента (блока)

Часто при разработке сайтов нам приходится сталкиваться со всплывающими окнами, можно по разному их реализовывать. Есть вариант с применением JavaScript, есть вариант на чистом CSS3, а есть вариант с применением jQuery. Ниже приведен несложный пример:

Пример:

jQuery

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

HTML

<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>

CSS

.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;
}

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и абзацы переносятся автоматически.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
5 + 0 =

Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Поделиться...

Группа вконтакте

Поделиться

Подписаться

Согласен на обработку указанных мною персональных данных.