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>