JQuery - скрытие элемента по клику вне его области

Часто встречающаяся проблемка - скрыть popup-окно на JavaScript при клике вне его области. Прямо как в FancyBox, но в упрощенном варианте.

Пример JQuery-окошка

Вот суть решения - назначаем на странице обработчик всех кликов OnClick. В том же обработчике, в переменной event.target и выявится элемент, на котором посетитель произвел клик. С помощью jQuery-метода closest() выясняем, где произошёл клик — на самом элементе или вне элемента. Во втором случае скрываем элемент. Читаем код и смотрим пример:

<script type="text/javascript">
  $(function () {
    $('#demo-text').hide();
    $('#demo-link').click(function (e) {
      var $message = $('#demo-text');

      if ($message.css('display') != 'block') {
        $message.show();

        var yourClick = true;
        $(document).bind('click.myEvent', function (e) {
          if (!yourClick && $(e.target).closest('#demo-text').length == 0) {
            $message.hide();
            $(document).unbind('click.myEvent');
          }
          yourClick = false;
        });
      }

      e.preventDefault();
    });
  });
</script>

Здесь:

  • #demo-text - текст в "окошке";
  • #demo-link - ссылка по клику на которую и начнется всё "шоу".

CSS-код:

#demo-text {
    width: 300px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #B1B1B1;
    padding: .1em 1.5em;
    margin: .5em 0;
    text-align: justify;
    text-indent: 15px;
    border: solid 1px #CCC;
}

 #demo-link a {
    text-decoration: none;
    border-bottom: 1px dashed;
}

 





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.