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

D
На сайте с 01.09.2015
Offline
56
319

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

Код окна:


<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-свойства для заднего фона модального окна*/
.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.Модальное окно**/
Veterok2009
На сайте с 28.11.2009
Offline
105
#1


$(document).on('click', 'идентификатор_кнопки' function (e) {
e.preventDefault();

setTimeout(function () {
window.location.href = "http://google.com";
}, 5000);

});
flacon2000
На сайте с 08.08.2013
Offline
86
#2
Veterok2009:

$(document).on('click', 'идентификатор_кнопки' function (e) {
e.preventDefault();

setTimeout(function () {
window.location.href = "http://google.com";
}, 5000);

});


$(document).on('click', 'идентификатор_кнопки', function (e) {
e.preventDefault();

setTimeout(function () {
window.location.href = "http://google.com";
}, 5000);

});
⭐ Бесплатно проконсультирую по Figma
D
На сайте с 01.09.2015
Offline
56
#3

Veterok2009, flacon2000, Почему то не перенаправляет.

D
На сайте с 01.09.2015
Offline
56
#4
ribchyk:
Перепроверьте, может вы чтото не так делаете?

Я делаю вот так:


<p style="text-align: center;">
<!-- Разметка для кнопки открытия модального окна -->
<a href="#iw-modal" class="iw-modal-btn"><button id="redirect">Переход</button></a>
<!-- end.Разметка для кнопки открытия модального окна -->

</p>


$(document).on('click', 'redirect', function (e) {
e.preventDefault();

setTimeout(function () {
window.location.href = "http://google.com";
}, 5000);

});
Samail
На сайте с 10.05.2007
Offline
328
#5
Digistive:
$(document).on('click', 'redirect',

Как минимум селектор: '#redirect'

D
На сайте с 01.09.2015
Offline
56
#6
Samail:
Как минимум селектор: '#redirect'

Все равно не перекидывает

Samail
На сайте с 10.05.2007
Offline
328
#7

jquery подключена?

Digistive:
window.location.href = "http://google.com";

Сайт на https? если указать https://google.com тоже не переходит?

D
На сайте с 01.09.2015
Offline
56
#8
Samail:
jquery подключена?
Сайт на https? если указать https://google.com тоже не переходит?

Jquery есть, сайт на https. Теперь после нажатия на кнопку окно не появляется, а редирект на гугл через указанное время идет.

Где тут может быть ошибка?


<script>

$(document).on('click', '#redirect', function (e) {
e.preventDefault();

setTimeout(function () {
window.location.href = "https://google.com";
}, 2000);

});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<p style="text-align: center;">
<!-- Разметка для кнопки открытия модального окна -->
<a href="#iw-modal" class="iw-modal-btn"><button id="redirect">Переход</button></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.Разметка для модального окна---->


---------- Добавлено 27.09.2019 в 20:57 ----------

Задача решена.

Вот код если кому нужно:


const openModalBtn = document.querySelector('.iw-modal-btn');

function modalHandler(e) {
setTimeout(() => {
window.location.replace('http://google.com');
},5000);
}

openModalBtn.addEventListener('click',modalHandler);

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий