Вы узнаете, как создать автоматическое всплывающее модальное окно для веб-сайта и как реализовать появление всплывающего окна с помощью файла cookie, созданного для веб-сайта, с использованием HTML, CSS и Javascript. Надеюсь, это видео будет полезным.
Скопируйте и вставьте исходный код из текстовых областей. Сначала попробуйте самостоятельно, следуя видеоуроку. Это поможет вам во всем разобраться. Если у вас что-то не так или у вас есть непонятная часть кода, используйте предоставленные исходные коды для сравнения с вашими. Это поможет вам заставить его работать.
HTML КОД:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="popup-screen">
<div class="popup-box">
<i class="fas fa-times close-btn"></i>
<h2>Popup Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">Subscribe</a>
</div>
</div>
CSS КОД:
.popup-screen{
z-index: 999999;
position: fixed;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
transition: 0.5s ease;
transition-property: visibility;
}
.popup-screen.active{
visibility: visible;
}
.popup-box{
position: relative;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
max-width: 350px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 20px;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
transform: scale(0);
transition: 0.5s ease;
transition-property: transform;
}
.popup-screen.active .popup-box{
transform: scale(1);
}
.popup-box h2{
font-size: 2.1em;
font-weight: 800;
margin-bottom: 20px;
}
.popup-box p{
font-size: 1em;
margin-bottom: 30px;
}
.popup-box .btn{
color: #fff;
background: red;
font-size: 1.1em;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
padding: 7px 27px;
border-radius: 3px;
}
.close-btn{
position: absolute;
font-size: 1em;
top: 0;
right: 0;
margin: 15px;
cursor: pointer;
opacity: 0.5;
transition: 0.3s ease;
transition-property: opacity;
}
.close-btn:hover{
opacity: 1;
}
JAVASCRIPT КОД:
<script type="text/javascript">
const popupScreen = document.querySelector(".popup-screen");
const popupBox = document.querySelector(".popup-box");
const closeBtn = document.querySelector(".close-btn");
window.addEventListener("load", () => {
setTimeout(() => {
popupScreen.classList.add("active");
}, 2000); //Всплывающее окно через 02 секунды после загрузки страницы.
});
closeBtn.addEventListener("click", () => {
popupScreen.classList.remove("active"); //Закройте всплывающий экран, нажав кнопку закрытия.
//Создайте файл cookie на день (срок действия которого истекает в течение дня) при нажатии кнопки закрытия.
document.cookie = "WebsiteName=testWebsite; max-age=" + 24 * 60 * 60; //1 day = 24 hours = 24*60*60
});
//Используйте созданный файл cookie, чтобы скрыть или показать всплывающее окно.
const WebsiteCookie = document.cookie.indexOf("WebsiteName=");
if(WebsiteCookie != -1){
popupScreen.style.display = "none"; //Скрыть всплывающее окно, если срок действия файла cookie не истек.
}
else{
popupScreen.style.display = "flex"; //Показать всплывающее окно, если срок действия файла cookie истек.
}
</script>