July 29, 2022
Всплывающее окно при загрузке страницы
Код необходимо вставить под блок, который должен стать всплывающим
Видеоинструкция: https://youtu.be/1bSnftQv8K0
<div class="auto-popup"></div>
<style>
.modal-window {
width:calc(100vw - 30px);
margin:auto;
max-width:800px;
/*Цвет фона*/
background: linear-gradient(152.97deg, rgba(21, 21, 21, 0.4) 0%, rgba(21, 21, 21, 0) 100%);
/*Две строки снизу -- эффект стекла*/
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/*Радиус закругления*/
border-radius: 16px;
position:fixed;
z-index:10;
top:50%; left:50%;transform:translate(-50%,-50%);
/*Отступы внутренние*/
padding: 15px 20px;
}
@media (min-width:768px) {
.modal-window {
/*Отступы внутренние для ПК-версии*/
padding: 25px 50px;
}
}
/*Если используете текст*/
.modal-window div {
/*Цвет текста*/
color:#ebebeb;
}
/*Если используете кнопку*/
.block-link {
max-width:350px; margin:auto;
}
/*Если используете форму*/
.modal-window input {
background: rgba(140, 140, 140, 0.29)!important;
border: 1px solid #000000!important;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.75);
backdrop-filter: blur(15.3261px);
-webkit-backdrop-filter: blur(15.3261px);
/*Радиус закругления*/
border-radius: 15px;
/*Цвет текста*/
color: #ebebeb!important;
}
.modal-window label {
/*Цвет текста*/
color: #ebebeb;
}
.modal-window button {
max-width:350px;
margin:auto;
}
/*Если используется секция*/
.modal-window .page-container {
width:100%;
}
</style>
<script>
let autoPopuper = document.querySelector('.auto-popup').parentElement.parentElement.parentElement.previousElementSibling
if (autoPopuper == null) {
autoPopuper = document.querySelector('.auto-popup').closest('.blocks-section').previousElementSibling
}
document.querySelector('body').insertAdjacentHTML('afterend','<div class="modal-window"></div>')
document.querySelector('.modal-window').append(autoPopuper)
document.querySelector('body').onclick = function (r) {
if (r.target !== document.querySelector('.modal-window')) {
CloseWindow()
}
}
document.querySelector('.modal-window').onclick = function (e) {
if (e.target !== document.querySelector('form button')) {
e.preventDefault()
}
}
Array.from(document.querySelectorAll('.modal-window .block-link a')).map((element) => {
if (element.href.indexOf('#')>-1) {element.setAttribute('onclick', 'CloseWindow()')}
})
function CloseWindow() {
document.querySelector('.modal-window').remove()
}
</script>