Как скрыть дивку при клике за пределами дивки?

Question

[Alibek Kulseitov]

1) Как убрать класс .userbar_show если кликнули за пределами самого блока?
2) Правильно ли отдельную функцию писать для кнопки, которая закрывает эту дивку?

$('.js-userbar-toggler').click( function(event) {
        $("body").toggleClass("body__scroll-hidden");  /* на боди вешается стиль который запрещает скролл */
        $(".userbar").toggleClass("userbar_show");  /* выезжает сайдбар блок */ 
    });
    $('.js-userbar-close').click( function(event) {
        $("body").removeClass("body__scroll-hidden");
        $(".userbar").removeClass("userbar_show");
    });

Comments

[Ankhena]

Закрытие окна с формой по клику мимо окна? еще на тостере есть аналогичные, последний был вчера или позавчера

Answer 1

[Александр Панкратов]

Если нужно скрывать всплывающее окно, по клику на фон, то обычно вешают обработчик клика на элемент фона.

$(".userbar").removeClass("userbar_show") - будет работать независимо от того где вызывается этот код и на всех элементах c классом "userbar". И более правильным подходом я считаю использование функций и привязка их через onclick в html коде.

Тоесть будет такой код:

function userbar_show(){
        $("body").toggleClass("body__scroll-hidden");  /* на боди вешается стиль который запрещает скролл */
        $(".userbar").toggleClass("userbar_show");
}

function userbar_hide(){
        $("body").removeClass("body__scroll-hidden");
        $(".userbar").removeClass("userbar_show");
}

<div class="wrapper">
 <div class="hower_backgroud" onclick="userbar_hide();"></div>
 <div class="userbar" onclick="userbar_hide();">
      <div class="js-userbar-toggler" onclick="userbar_show();"></div>
      <div class="js-userbar-close" onclick="userbar_hide();"></div>
 </div>
</div>