Как заставить модальное окно выполнить редирект?

@Siurendy · Регистрация: 07.06.2016

Здравствуйте. Подскажите как сделать, чтобы при нажатии на кнопку, появившееся модальное окно редиректила через 5 секунд на другую страницу?

HTML5

<p style="text-align: center;">
    <!-- Разметка для кнопки открытия модального окна -->
        <a href="#iw-modal" class="iw-modal-btn">Открыть модальное окно</a>
    <!-- end.Разметка для кнопки открытия модального окна -->
    </p>
    
    
 
        <!---Разметка для модального окна----> 
        <div id="iw-modal" class="iw-modal">
            <div class="iw-modal-wrapper">
              <div class="iw-CSS-modal-inner">
                 <div class="iw-modal-header">
                    <h3 class="iw-modal-title">Заголовок модального окна</h3>
                    <a href="#close" title="Закрыть" class="iw-close">×</a>
                 </div>
                 <div class="iw-modal-text">    
                   <p>Здесь Вы можете разместить свой текст, изображения или формы обратной связи</p>
                 </div>
              </div>
            </div>  
        </div>
    <!---end.Разметка для модального окна---->

CSS

/********Модальное окно************/
  
/*CSS-свойства для заднего фона модального окна*/
.iw-modal {
    opacity: 0; /*изначально этот блок должен быть прозрачным*/ 
    background: rgba(0,0,0,0.7); /*задаём цвет фона*/
    pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
    position: fixed; 
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    transition: all 0.5s ease;
    margin: 0;
    padding: 0;
}
 
.iw-modal:target {
    opacity: 1; /*при клике окно становится видимым*/
    pointer-events: auto; /*теперь по окну можно кликать мышкой*/
    overflow-y: auto; /*прокрутка по вертикли страницы*/
}
 
.iw-modal-wrapper {
    margin:auto; /*выравниваем окно по центру по горизонтали*/
    margin-top:25vh; /*отступ сверху можно задавать в px, % или vh*/
}
 
/*CSS-свойства для блока, содержащего контент модального окна */ 
.iw-CSS-modal-inner {
    position: relative;
    background: #fff; /*цвет фона*/
    border: 1px solid #ccc; /*цвет и толщина рамки*/
    border-radius: 0px; /*радиус скругления углов*/
 
}
 
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
    padding: 15px;/*внутренний отступ*/
    background:#f1f1f1;/*цвет фона*/
    position:relative;
}
.iw-modal-title {
    font-size: 18px; /*размер шрифта*/
    color:#555; /*цвет шрифта*/
    font-weight:bold; /*жирность шрифта*/
    line-height: 1.5; /*высота строки*/
    margin-top: 0;
    margin-bottom: 0;
}
 
/*CSS для кнопки закрытия окна*/
.iw-close {
    position:absolute;
    top:15px; /*отступ сверху*/
    right:10px; /*отступ справа*/
    font-size: 24px; /*размер шрифта*/
    color: #555; /*цвет шрифта*/
    text-decoration: none;
}
 
.iw-close:hover, .iw-close:focus {
    color: #000; /*цвет шрифта при наведении*/
    cursor: pointer;
}
 
/*CSS для блока с текстом модального окна*/
 
.iw-modal-text {
  padding: 15px 20px; /*внутренний отступ*/
}
 
/**MEDIA**/
@media (min-width: 550px) {
  .iw-modal-wrapper {
      max-width: 500px;
   }
}
/**end.Модальное окно**/

@Halmakari · 27.09.2019, 19:54

С помощью setTimeout делаешь задержку в 5 сек и дальше в callback функцию, где применяешь функцию window.location.replace(your url)

Вот код:

Javascript

const openModalBtn = document.querySelector('.iw-modal-btn');
 
function modalHandler(e) {
  setTimeout(() => {
    window.location.replace('http://google.com');
  },5000);
}
 
openModalBtn.addEventListener('click',modalHandler);

Опции темы

Как заставить модальное окно выполнить редирект?

Решение