0 / 0 / 0
Регистрация: 07.06.2016
Сообщений: 78
1

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

27.09.2019, 15:51. Показов 3299. Ответов 1
Метки нет (Все метки)

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/********Модальное окно************/
  
/*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.Модальное окно**/
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.09.2019, 15:51
Ответы с готовыми решениями:

Как заставить родительское окно, после закрытия дочерного, выполнить функцию (переход на другой сайт)?
При нажатии на кнопку открывается новое окно через ф-цию: function okno(e) { var h = 400, ...

то нужно заставить одновременно работать слайдер и модальное окно обратной связи
Добрый день! Я новичек в программировании и вот столкнулся с обной проблемой, никак не получается...

Создать модальное окно (дочернее окно) как в одноклассниках
Здраствуйте всем, Нужна помощь. Я хочу создать модальное окно (дочерное окно) в ASP.NET на примере...

Как создать окно в окне (модальное окно)?
Подскажите новичку, как создать на сайте в родительском окне небольшое окошко поверх него для ввода...

1
4 / 2 / 2
Регистрация: 05.06.2019
Сообщений: 4
27.09.2019, 19:54 2
Лучший ответ Сообщение было отмечено Siurendy как решение

Решение

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

Вот код:
Javascript
1
2
3
4
5
6
7
8
9
const openModalBtn = document.querySelector('.iw-modal-btn');
 
function modalHandler(e) {
  setTimeout(() => {
    window.location.replace('http://google.com');
  },5000);
}
 
openModalBtn.addEventListener('click',modalHandler);
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.09.2019, 19:54
Помогаю со студенческими работами здесь

Создается окно и тут же закрывается. Как заставить окно оставаться рабочим открытым?
Как заставить окно оставаться рабочим открытым? Скопировал с одного исходника код (с++ WinApi) для...

MessageBox: Как сделать так, чтобы если окно модальное, при клике на родительское окно MessageBox мигал?
Здравия всем! Никак не найду нужный MB_*, как можно сделать так, чтобы если сделать MessageBox...

Как сделать модальное окно
Необходимо реализовать простейшее модальное окно. Пример...

Как создать модальное окно
Парни всем привет. Задача у меня такая. Есть несколько кнопок с одинаковым id &lt;td...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru