1

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

1 ответ 1

4

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

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>

3
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 12 дек. 2023 в 13:24
  • Гениально. Респект. Commented 12 дек. 2023 в 13:46
  • 1
    @Сергей, простите, а где в этом ответе "модальность"? Этот же вопрос и к автору ответа.
    – UModeL
    Commented 12 дек. 2023 в 15:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.