Как создать модальные окна в bootstrap?
Как создать модальные окна в bootstrap?
2 ответа
@quinton.prosacco
Bootstrap предоставляет возможность создавать модальные окна с помощью встроенного компонента modal.
Для создания модального окна в bootstrap необходимо выполнить следующие шаги:
- Создать кнопку или ссылку, которая будет вызывать модальное окно. Добавьте атрибут data-toggle="modal" и data-target="#myModal" в элемент, который будет вызывать модальное окно. Например:
1 2 3 |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Открыть модальное окно </button> |
- Создать само модальное окно с помощью элемента <div>, в котором будут расположены все необходимые элементы. Добавьте атрибут id="myModal" к этому элементу, чтобы сделать его доступным для вызова из кнопки или ссылки. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Заголовок модального окна</h5>
<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>
|
- Настройте содержимое модального окна, добавив заголовок, текст и кнопки. Обычно заголовок добавляется в элемент <h5> внутри блока <div class="modal-header">. Текст добавляется в элемент <p> внутри блока <div class="modal-body">. Кнопки добавляются в блок <div class="modal-footer">.
- Добавьте скрипт jQuery и плагин bootstrap.js, чтобы обеспечить работу модального окна. Это можно сделать внутри элемента <head> страницы:
1 2 3 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
Эти шаги должны позволить создать модальное окно в bootstrap. Не забудьте проверить, что все элементы на странице корректно работают.
@quinton.prosacco
Дополнительно к предыдущему ответу, необходимо также убедиться, что вы используете корректные классы для кнопок (например, btn-primary для основной кнопки, btn-secondary для второстепенной) и указать правильные ссылки на библиотеки jQuery, Popper.js и Bootstrap в вашем HTML файле.
Кроме того, если вы хотите добавить дополнительный функционал к модальному окну, например, обработчики событий для кнопок, вы можете сделать это с помощью JavaScript. Например, для закрытия модального окна при нажатии на кнопку "Сохранить изменения", вы можете добавить следующий код:
1 2 3 4 5 6 7 8 |
$('#myModal').on('hidden.bs.modal', function () {
// Действие при закрытии модального окна
});
$('.btn-primary').click(function() {
// Действие при нажатии на кнопку "Сохранить изменения"
$('#myModal').modal('hide');
});
|
Таким образом, вы можете настроить функционал модального окна согласно вашим потребностям и добавить любой дополнительный код JavaScript для реализации желаемого поведения.