1

Помогите исправить код. Есть две формы pop-up. Первое pop-up выводится через 5сек. после открытия окна браузера, второе - только после закрытия первого окна и +15сек.

<div id="overlay">
<div class="popup">
<div class="pl-right">
<h2>Форма1. Звоните!</h2><br /><br />
</div>
<button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
</div>

<div id="overlay1">
<div class="popup">
<div class="pl-right">
<h2>Форма2. Звоните!</h2><br /><br />
</div>
<button class="close" title="Закрыть" onclick="document.getElementById('overlay1').style.display='none';"></button>
</div>

<script type="text/javascript">
$(function() {
if (!$.cookie('hideModal')) {
setTimeout("document.getElementById('overlay').style.display='block'", 5000);
setTimeout("document.getElementById('overlay1').style.display='block'", 15000);
}
$.cookie('hideModal', true, {
expires: 1,
path: '/'
});
});
</script>
0

2 ответа 2

0

let wrapper, header, body, footer;

document.addEventListener('DOMContentLoaded', _ => {
  wrapper = document.querySelector('#modalWrapper');
  header  = wrapper.querySelector('.modalHeader');
  body    = wrapper.querySelector('.modalContent');
  footer  = wrapper.querySelector('.modalFooter');
  
  setTimeout(firstModal, 1000); // Для удобства 1 сек. вместо 5
});

function toggleModal(delay = 0, fn){
  // Если передана задержка + функция
  if(delay && Number.isInteger(delay) && typeof fn === 'function')
    // Ставим таймер на функцию
    setTimeout(_ => fn(), delay * 1000);
  
  wrapper.style.display = getComputedStyle(wrapper, null).display !== 'none' ? 'none' : 'flex';
}

function firstModal(){
  header.innerHTML = 'Первое окно';
  body.innerHTML = 'Тут должны быть печеньки, но я их съел :)';
  footer.innerHTML = `<a href='#' onClick='toggleModal(2, secondModal);'>Закрыть</a>`;
  
  // Тут открываем первое окно, а в ссылке на закрытие "заряженный" вызов второго окна
  toggleModal();
}

function secondModal(){
  header.innerHTML = 'Второе окно';
  body.innerHTML = 'Видимо, <a href="https://ru.wikipedia.org/wiki/Crazy_Machines">заработало!</a>';
  footer.innerHTML = `<a href='#' onClick='toggleModal();'>Закрыть</a>`;
  
  toggleModal();
}
#modalWrapper{
  position: fixed; left: 0; top: 0; bottom: 0; right: 0;
  height: 100%; width: 100%;
  background: rgba(0,0,0,.5);
  display: none;
}
#modalWindow{
  position: relative;
  margin: auto;
  width: 50%;
  height: 50%;
  background: white;
  box-sizing: border-box;
}
.modalHeader{
  border-bottom: 1px solid #000;
  padding: 10px;
  font-weight: 800;
}
.modalContent{
  padding: 5px;
}
.modalFooter{
  position: absolute; bottom: 0;
  padding: 5px 10px;
  font-weight: 600;
}
<div id='modalWrapper'>
  <div id='modalWindow'>
    <div class='modalHeader'>Header</div>
    <div class='modalContent'>Body</div>
    <div class='modalFooter'>Footer</div>
  </div>
</div>

0
function timeout_init() {
setTimeout("document.getElementById('overlay1').style.display='block'", 4000);
    }
/* вызов в коде */
onclick="document.getElementById('overlay').style.display='none'; timeout_init();"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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