6 / 5 / 1
Регистрация: 27.06.2017
Сообщений: 241
1

Несколько модальных окон

01.01.2019, 05:04. Показов 1402. Ответов 0
Метки нет (Все метки)

У меня на странице есть модальное окно:
HTML5
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
<a href="#0" class="cd-popup-trigger" id="settings"><i class="fas fa-search"></i><span>Поиск друзей</span></a>
<!-- модальное окно -->
<div class="cd-popup" role="alert">
  <div class="cd-popup-container">
    <h2>Поиск пользователей</h2>
    <a href="#0" class="cd-popup-close img-replace"></a>
    <div class="textpopup">
      Ввведите имя пользователя: <input type="text" name="" value=""><br>
      <button type="button" name="button">Найти</button>
      <div class="users-found">
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
        <div class="user">
          <p>
            <img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" align="middle" alt="" width="66px" height="66px">Chebureck
            <em><i class="fas fa-plus"></i> Добавить</em>
          </p>
        </div>
 
      </div>
    </div>
  </div>
</div>
Вызывается оно кнопкой:
HTML5
1
<button  href="#0" class="cd-popup-trigger" id="settings"><i class="fas fa-search"></i><span>Поиск друзей</span></button>
CSS код:
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
  opacity: 1;
  z-index: 99;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
 
.cd-popup-container {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 4em auto;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.cd-popup-container p {
  padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
  content: "";
  display: table;
  clear: both;
}
.cd-popup-container .cd-buttons li {
  float: left;
  width: 50%;
}
.cd-popup-container .cd-buttons a {
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:first-child a {
  background: #fc7169;
  border-radius: 0 0 0 .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
  background-color: #fc8982;
}
.cd-popup-container .cd-buttons li:last-child a {
  background: #b6bece;
  border-radius: 0 0 .25em 0;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
  background-color: #c5ccd8;
}
.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
 
.cd-popup-container .textpopup{
  border-top: 1px solid #ffc7c7;
    color:black;
    padding: 10px;
  }
 
  .cd-popup-container .textpopup input{
    border:none;
    border:1px solid lightblue;
    border-radius: 3px;
    width:50%;
    height:4%;
    padding-right:5px;
    padding-left:5px;
    font-size: 17px;
  }
  .cd-popup-container .textpopup input:focus{
    outline:none;
  }
  .cd-popup-container .textpopup button{
    border: none;
    background-color: #324961;
    color:white;
    font-weight: 900;
    border-radius:5px;
    width:100%;
    height:5%;
    margin:10px 0;
    cursor: pointer;
    font-size: 19px;
    font-family:Verdana, Geneva, sans-serif;
    box-shadow: 3px 5px 10px 0px #0000006b;
  }
  .cd-popup-container .textpopup button:hover{
  background: #1C6777;
  }
  .cd-popup-container .textpopup button:focus{
    outline:none;
  }
  .cd-popup-container .textpopup .users-found{
    margin-top:15px;
    overflow-y:scroll;
    overflow-x: hidden;
    width:100%;
    height:50%;
  }
  .users-found .user img{
    margin-left:10px;
    /* width:10%;
    height:14%; */
    border-radius: 50%;
    vertical-align: middle;
    margin-right:20px !important;
  }
  .users-found .user p{
    padding: 0;
    font-size: 18px;
  }
  .users-found .user{
    text-align: left;
    vertical-align: middle;
    border:1px solid #b7ced6;
    border-radius: 5px;
    padding:5px 0;
    margin-bottom:10px;
  }
  .users-found .user p em{
    padding:10px 20px;
    background: #324961;
    color:white;
    border-radius: 20px;
    position: relative;
    left: 310px;
    top:1px;
  }
  .users-found .user p em:hover{
    cursor: pointer;
    background: #4a5c8ed4;
  }
И JQ код для открытия окна:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    jQuery(document).ready(function($){
        //open popup
        $('.cd-popup-trigger').on('click', function(event){
            event.preventDefault();
            $('.cd-popup').addClass('is-visible');
        });
 
        //close popup
        $('.cd-popup').on('click', function(event){
            if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
                event.preventDefault();
                $(this).removeClass('is-visible');
            }
        });
        //close popup when clicking the esc keyboard button
        $(document).keyup(function(event){
            if(event.which=='27'){
                $('.cd-popup').removeClass('is-visible');
            }
        });
    });
Как сделать,чтобы открывалось несколько разных модальных окон?Не хочется для каждого прописывать свой CSS код...

CodePin: Модальное окно
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.01.2019, 05:04
Ответы с готовыми решениями:

Наложение модальных окон
Здравствуйте! Пытаюсь создать html-страницу, включающую 2 части-колонки, из которых...

Как сделать много модальных окон на странице? (с разными данными)
Страница имеет в наличии несколько кнопок, при клике на которые открывается модальное окно с...

Открытие статей в модальных окнах
Подскажите код, который будет выводить каждую статью в модальное окно. То есть у меня cms, но...

Несколько модальных окон
Соответственно, есть вот такой скрипт - https://codepen.io/dzivenu/pen/BwmBqq &lt;h1&gt;Simple...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.01.2019, 05:04

Несколько модальных окон на одной странице
Добрый день, Форумчане Нужен очень скрипт модальных окон, который позволяет открыть модальное...

Закрытие модальных окон
Есть модальное окно: &lt;div class= &quot;modal&quot;&gt; &lt;div class = &quot;modal_content&quot;&gt;&lt;/div&gt; &lt;/div&gt; ...

Много модальных окон
Добрый вечер. На странице есть очень много модальных окон. Модалки реализованы посредством...

Кеширование модальных окон (PHP)
Ув. ALL Столкнулся с проблемой полного и постоянного кеширования модального окна. (См. файл)...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.