Чтобы отобразить модальное окно Bootstrap, вы можете использовать следующие методы:
Метод 1: использование JavaScript/jQuery:
- Добавьте необходимые файлы Bootstrap CSS и JavaScript в свой HTML-документ.
- Создайте кнопку или элемент, который запускает модальное окно.
- Назначьте идентификатор модальному элементу.
- Напишите код JavaScript/jQuery для обработки события нажатия кнопки и отображения модального окна с использованием ее идентификатора.
Пример:
<!-- Include Bootstrap CSS and JavaScript files -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<!-- Button to trigger the modal -->
<button id="myModalBtn">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal content goes here -->
</div>
</div>
</div>
<!-- JavaScript/jQuery code to show the modal -->
<script>
$(document).ready(function() {
$('#myModalBtn').click(function() {
$('#myModal').modal('show');
});
});
</script>
Метод 2. Использование атрибутов данных Bootstrap:
-
- Добавьте необходимые файлы Bootstrap CSS и JavaScript в свой HTML-документ.
- Создайте кнопку или элемент, который активирует модальное окно.
- Добавьте к кнопке атрибуты
data-toggleиdata-target, указав значение «modal» и идентификатор модального элемента соответственно.
Добавьте к кнопке атрибуты data-toggleи data-target.
Пример:
<!-- Include Bootstrap CSS and JavaScript files -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.min.js"></script>
<!-- Button to trigger the modal -->
<button data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal content goes here -->
</div>
</div>
</div>