Как закрывать окно при нажатие вне него?

Question

[Quelagrate]

Доброе утро!
Подскажите, пожалуйста новичку(тупому)...имеем код:

$( ".music-btn" ).first().on( "click", function() {
  $( ".music-content" ).first().fadeToggle(100);
  $( ".music-content" ).removeClass( "close" ).addClass( "open" ); 
} );

С помощью него при нажатии на music-btn открываю и закрываю окно, но можно ли как-то сделать , чтобы это окно также закрывалось и при нажатии в рандомное место сайта? и чтобы при этом не ломалось закрытие на кнопку... и еще момент, классы добавляю из-за анимации:

.open {
	animation: open 0.1s ;
	transition: all.0.1s ease;
}

@keyframes open {
    0% {
      top: calc(42px + 40px);
    }
    100% {
      top: calc(42px + 30px);
    }
}

но она присутствует только при открытии, а как сделать при закрытии я не понимаю...
Может есть какой-то аналогичный способ?

Заранее спасибо! ♥

Answer 1

[DmiDrok]

$(document).on('click', function(event) {
  const isPopupClicked = Boolean(event.target.closest('.music-content'));
  if (!isPopupClicked) {
    $('.music-content').removeClass('open');
  }
});

upd: Код для плавной анимации (но без keyframes :))

HTML:

<div class="music-content"></div>
<button class="music-btn">Open</button>

CSS:

.music-content {
  width: 400px;
  height: 400px;
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: tomato;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: transform ease .5s, opacity ease .2s, visibility ease .2s;
}

.open {
  transform: translate(-50%, 20%);
  opacity: 1;
  visibility: visible;
}

JS:

$(document).on('click', function(event) {
  const isPopupClicked = Boolean(event.target.closest('.music-content'));
  if (!isPopupClicked) {
    $('.music-content').removeClass('open');
  }
});

$('.music-btn').on('click', function(event) {
  event.stopPropagation();
  $('.music-content').addClass('open');
});

Comments

[Quelagrate]

не совсем понимаю, что с этим делать :)

[DmiDrok]

Quelagrate, Это код для закрытия .music-content по клику вне него. Вставьте его в ваши скрипты и проверьте, работает или нет

[DmiDrok]

Quelagrate, Обновил для анимации

[Quelagrate]

DmiDrok, спасибо за подробное разъяснение, однако нужно, чтобы окно также и закрывалось по кнопке, по которой открылось)

[DmiDrok]

Quelagrate,
$('.music-btn').on('click', function(event) {
event.stopPropagation();
$('.music-content').addClass('open');
});

В этом фрагменте замените addClass('open') на toggleClass('open')

[Quelagrate]

DmiDrok, работает все четко, спору нет, но как только подгоняю под свой сайт - ничего не работает :D

[Quelagrate]

DmiDrok, мб проблема в том, что окно у меня не свободно плавающее... а находится в родительском блоке?

[DmiDrok]

Quelagrate, Возможно, здесь очень много чего может влиять на поведение блока.

Answer 2

[Константин Гусев]

Я так понял у тебя анимация лишь как open, да?
- Тогда можно просто в JS менять значения в свойстве animation , а как подключить @keyframes к JS можешь и сам узнать (НО если нужно могу дать пример).
- Ещё можешь добавлять класс .open - при открытии и .close - при закрытии, там же писать логику, когда закрывается, открывается и, конечно, когда он в статике.
Так-же есть и другие способы.

Comments

[Quelagrate]

Пример с анимацией не помешает, но тут в основном проблема в том, что я не знаю как добавить закрытие этого окна при клике вне него :)

[Константин Гусев]