Как сделать выезжающее модальное окно?

Question

Как сделать модальное окно, которое бы по нажатию на кнопку выезжало из правой части экрана на несколько секунд, после чего автоматически уезжало бы обратно за границу экрана?

Answer 1

Я сделал так, в коде есть коментарии, что бы было легче разобраться.

let modal = document.getElementById("modal");
let button = document.getElementById("modalButton");
let closeBtn = document.getElementsByClassName("close")[0];

// При нажатии на кнопку открываем модальное окно
button.onclick = function() {
  modal.style.animation = "slideIn 0.5s forwards";
  modal.style.display = "block";

  // Закрываем модальное окно после 5 секунд
  setTimeout(function() {
    modal.style.animation = "slideOut 0.5s forwards";

    // Очищаем анимацию и скрываем окно
    setTimeout(function() {
      modal.style.animation = "";
      modal.style.display = "none";
    }, 500);
  }, 5000);
}

// Закрываем модальное окно при нажатии на кнопку "Закрыть"
closeBtn.onclick = function() {
  modal.style.animation = "slideOut 0.5s forwards";

  // Очищаем анимацию и скрываем окно
  setTimeout(function() {
    modal.style.animation = "";
    modal.style.display = "none";
  }, 500);
}

.modal {
  display: none;
  position: fixed;
  right: -400px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: right 0.5s ease-out;
}

.modal-content {
  padding: 20px;
}

.close {
  float: right;
  cursor: pointer;
}

/* Анимация выезда / уезда */
@keyframes slideIn {
  0% {
    right: -400px;
  }
  100% {
    right: 0;
  }
}

@keyframes slideOut {
  0% {
    right: 0;
  }
  100% {
    right: -400px;
  }
}

<button id="modalButton">Открыть окно</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>модальное окно</p>
  </div>
</div>

БЛОГ НА HUSL

Как сделать выезжающее модальное окно?

Ответы (1 шт):