Форум Сайтостроение Веб-строительство

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

D
На сайте с 01.09.2015
Offline
59
Digistive
482

Здравствуйте. Подскажите как сделать, чтобы при нажатии на кнопку, появившееся модальное окно редиректила через 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
129
Veterok2009
#1 


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

   e.preventDefault();



   setTimeout(function () {

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

    }, 5000); 



});
F2
На сайте с 08.08.2013
Offline
111
flacon2000
#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); 



});
⭐ ⭐ ⭐
D
На сайте с 01.09.2015
Offline
59
Digistive
#3

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

D
На сайте с 01.09.2015
Offline
59
Digistive
#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
369
Samail
#5
Digistive:
$(document).on('click', 'redirect',

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

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

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

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

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

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

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

D
На сайте с 01.09.2015
Offline
59
Digistive
#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);

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