Для создания модального окна с открытым состоянием при загрузке страницы с использованием Bootstrap 5, следует сделать следующее:
1. Создать модальное окно в HTML-разметке, например:
```html
<div class="modal" tabindex="-1" role="dialog" id="myModal" style="display: block;">
<div class="modal-dialog" role="document">
<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="Close"></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>
```
2. Добавить необходимые скрипты Bootstrap 5 в ваш файл HTML (для этого можно воспользоваться CDN):
```html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
```
3. Добавить следующий скрипт для инициализации модального окна при загрузке страницы:
```html
<script>
document.addEventListener('DOMContentLoaded', function() {
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
});
myModal.show();
});
</script>
```
После выполнения этих шагов, модальное окно с открытым состоянием будет отображаться при загрузке страницы.
Чтобы настроить модальное окно таким образом, чтобы оно автоматически появлялось при входе пользователя на страницу, достаточно добавить вызов функции `myModal.show()` в нужном месте вашего кода или в скрипте, который будет выполняться при загрузке страницы. В данном примере этот вызов уже добавлен в скрипт инициализации, поэтому модальное окно будет отображаться автоматически.