Как создать модальные окна в bootstrap?
1 ответ
от
marlen ,
6 месяцев назад
@terrence
Для создания модальных окон в Bootstrap необходимо использовать компонент Modal.
Пример:
- Создайте кнопку или элемент, по клику на который будет открываться модальное окно:
1 2 3 |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Открыть модальное окно </button> |
- Создайте само модальное окно с помощью элемента с классом "modal" и уникальным идентификатором:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<h4 class="modal-title">Моё модальное окно</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Тело модального окна -->
<div class="modal-body">
<p>Содержимое модального окна...</p>
</div>
<!-- Подвал модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить изменения</button>
</div>
</div>
</div>
</div>
|
Обратите внимание, что data-target атрибут элемента открывающего модальное окно должен содержать значение, соответствующее идентификатору модального окна (в данном примере "#myModal").
При клике на кнопку с атрибутом data-target, модальное окно будет открыто. Для закрытия модального окна можно использовать кнопку в подвале модального окна или атрибут data-dismiss, который можно добавить к кнопке, элементу или ссылке внутри модального окна.
Подробнее о создании модальных окон в Bootstrap вы можете узнать в официальной документации: https://getbootstrap.com/docs/4.6/components/modal/
15