23 wrz 2021

#shorts - modal

modal
Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.

Ale co z drugą częścią? Gdy klikam ponownie na element i usuwam klasę z body. Zamiast ładnego przejścia mam "chamskie" zniknięcie warstwy bez animacji opacity.

Jest na to proste rozwiązaniem bez kombinowania w css, zmiana wysokości na 0, czy nawet z js a mianowicie na użycie animationend

Zaczniemy od html

<!-- włączenie/wyłączenie modal -->
<button type="button">MODAL</button>

<!-- najlepiej tę warstwę dodać gdzieś -->
<!-- na końcu strony przez zamknięciem body -->
<div class="modal"></div>

Teraz najważniejsza cześć czyli style.

.modal {
  position: fixed;
  background: rgba(171, 108, 253, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: auto;

  /* najważniejsza część */
  opacity: 0;
  pointer-events: none;

  /* nasza animacja */
  transition: opacity 0.2s ease-in-out;
}

/* active-modal klasa dodawana do body 
strony podczas kliknięcie w button */
.active-modal .modal {
  opacity: 1;
  pointer-events: auto;
}

No i oczywiście kod wywołujący a także zamykający warstwę div

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  // dodaje/usuń klasę z body
  document.body.classList.toggle('active-modal');
})

Poniżej cały działający przykład.

See the Pen
modal with point-event
by Greg (@Tomik23)
on CodePen.