hide click outside

hide click outside HTML JS (спрятать блок при клике вне этого блока)

by tripcollor

HTML

<span class="button"><p class="button_text">Click</p>
  <div class="show-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veniam aliquid ut in? Veniam a fugiat quo beatae consequatur harum modi, sed magni laborum, nobis illo, quidem et, reprehenderit qui.</p>
  </div>
</span>

CSS

.button{
  width: 190px;
  height: 50px;
  background: tomato;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  display: table;
  cursor: pointer;
}
.button_text{
    font-size: 20px;
    color: #fff;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.show-block{
  display: none;
  background: #ccc;
  padding: 20px;
  position: absolute;
  width: 50vw;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}

JavaScript

var clickCount = 1; // Задаем счетчик кликов

// Обработчик кликов на кнопке
$('.button').click(function(e){
	e.stopPropagation(); // останавливаем всплытие чтобы не сработал оброботчик кликов на window 19 строчка
	if(clickCount == 1){
  	//если нажили в первый раз на  кнопку то показываем попап
    $(this).children('.show-block').show();
    //ставим счетчик клика на 2
    clickCount = 2;
  }else{
  	//если кликнули по кнопке второй раз скрываем попап
    $(this).children('.show-block').hide();
    //и переключаем счетчик кликов на 1
    clickCount = 1;
  }
});

// Обработчик кликов на попапе
$('.show-block').click(function(e){
	e.stopPropagation(); // останавливаем всплытие чтобы не сработал оброботчик кликов на window 19 строчка
});

// Обработчик кликов на всем документе
$(window).click(function(){
	//скрываем попап
	$('.show-block').hide();
  //переключаем счетчк кликов на 1
  clickCount = 1;
});