Как сделать модальное окно, которое бы по нажатию на кнопку выезжало из правой части экрана на несколько секунд, после чего автоматически уезжало бы обратно за границу экрана?
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">×</span>
<p>модальное окно</p>
</div>
</div>