@krista
Для создания нескольких модальных окон на странице с помощью jQuery можно использовать следующий подход:
- Создание HTML-кода для модальных окон. Например:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="modal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Modal content 1</p>
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Modal content 2</p>
</div>
</div>
|
- Создание стилей для модальных окон. Например:
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
|
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
|
- Написание скрипта jQuery для открытия и закрытия модальных окон. Например:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(document).ready(function() {
// Открытие модального окна 1
$("#btn-modal1").click(function() {
$("#modal1").show();
});
// Закрытие модального окна 1
$("#modal1 .close").click(function() {
$("#modal1").hide();
});
// Открытие модального окна 2
$("#btn-modal2").click(function() {
$("#modal2").show();
});
// Закрытие модального окна 2
$("#modal2 .close").click(function() {
$("#modal2").hide();
});
});
|
- Добавление кнопок для открытия модальных окон. Например:
1
2
|
<button id="btn-modal1">Открыть модальное окно 1</button>
<button id="btn-modal2">Открыть модальное окно 2</button>
|
Таким образом, при нажатии на соответствующие кнопки будут открываться модальные окна, которые можно закрыть при нажатии на крестик в углу окна.