Для создания изначально открытого модального окна на Bootstrap 5 вам потребуется немного дополнительных действий по сравнению с предыдущими версиями. В Bootstrap 5 уже нет встроенной функциональности для автоматического открытия модального окна, но вы можете добиться желаемого эффекта, используя JavaScript.
Ниже приведен пример кода, позволяющий создать модальное окно, которое открывается автоматически при загрузке страницы:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Modal Example</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- Модальное окно --> <div class="modal show" tabindex="-1" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Пример модального окна</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button> </div> <div class="modal-body"> <p>Текст внутри модального окна.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button> </div> </div> </div> </div> </body> </html>
Обратите внимание на следующие изменения:
1. Добавлен класс show к div.modal, чтобы модальное окно отобразилось при загрузке страницы.
2. Добавлен атрибут tabindex="-1" для управления фокусом и атрибут style="display: block;", чтобы обеспечить видимость модального окна.
3. Убран атрибут data-bs-toggle="modal" у кнопки для открытия модального окна, чтобы предотвратить автоматическое открытие при клике.
Таким образом, вы можете использовать этот код для создания изначально открытого модального окна на Bootstrap 5.