Как сделать модальное окно на экране, с задержкой 5 секунд?

Question

[Andrew]

Добрый день, подскажите как реализовать появление модального окна, на определенном экране сайта, с задержкой 5 секунд.
Возможно подскажите фреймы, или возможно готовые решения, заранее спасибо.

Comments

[antimodern]

Фрейм для модалки? Серьезно?

Может все-таки лучше дизайном займешся?))

Answer 1

[Johny Smith]

https://codepen.io/chrissteurer/pen/vIGAp

Answer 2

[fix0_o]

Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.

Пример: https://codepen.io/Fix0_o/pen/wRRVpW

<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>

<div class='modal_bg'>
  <div class='flex'>
    <div class='modal_win modal_1'>Modal window 1</div>
    <div class='modal_win modal_2'>Modal window 2</div>
  </div>
</div>

.modal_bg {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #000;
  display: none;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height:100%;
}
.modal_win {
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  text-align: center;
  display: none;
}

$(document).on('click', "[modal-win]", function(event){
  event.preventDefault();
  var target = event.target;
  var acbut = $(target).attr('modal-win');
  $('.'+acbut).fadeIn(600);
  $('.modal_bg').fadeIn(600);
});

$(document).on('click', ".modal_bg", function(event){
  event.preventDefault();
  event.stopPropagation();
  var target = event.target;
  var check = $(target).attr('class');
  if(check == 'flex'){
    $(this).fadeOut(600);
    $('.modal_win').each(function (index, element) {
      $(element).fadeOut(600);
    });
  }
});