@quinton.prosacco
Bootstrap предоставляет возможность создавать модальные окна с помощью встроенного компонента modal
.
Для создания модального окна в bootstrap необходимо выполнить следующие шаги:
1 2 3 |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Открыть модальное окно </button> |
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> |
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. Не забудьте проверить, что все элементы на странице корректно работают.