Jquery скрытие элементов

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

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

Вот суть решения - назначаем на странице обработчик всех кликов 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>

В примере нажмите на ссылку «Что такое шаблоны MODx?» чтобы понять, как работает:

• #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;
}