Как сделать изначалаьно открытое модальное окно на бутстрап 5?
Использую стандартное модальное окно (бутстрап 5) на сайте.
Подскажите как сделать так чтоб когда человек заходил на сайт оно автоматом открывалось?
<!-- Модальное окно --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить изменения</button> </div> </div> </div> </div> |
<!-- Модальное окно --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить изменения</button> </div> </div> </div> </div>
Дополнительно:
Попробуйте может так
<div class="modal fade open">...</div>
Как сделать изначалаьно открытое модальное окно на бутстрап 5?
Подскажите как сделать так чтоб когда человек заходил на сайт оно автоматом открывалось?
Так оно должно быть "изначально открыто" или должно "открываться"?
Ответы:
https://getbootstrap.com/.../modal/#via-javascript
https://getbootstrap.com/.../modal/#methods
- Использвал в документации - не отрабатывает.
Срабатывает этот вариант:
$(window).on('load',function(){ $('#successfulRegistration').modal('show'); });
$(window).on('load',function(){ $('#successfulRegistration').modal('show'); });
Но есть проблемка он срабатывает только как страница будет загружен - могли бы подсказать как сделать так чтоб он моментально срабатывал при открытии сайта - еще до момента прогрузки страницы?
- L1nw0od, так наврятли получится. Т.к. сначала загружается разметка/стили страницы, потом скрипты и т.п.. Соответственно без разметки и скриптов - ни чего не запустится.
Как вариант, для ускорения - можете отказаться от jQuery (т.к. он то же сначала должен будет загрузиться), а использовать нативный JS. Но опять же, сначала должен будет подгрузиться код бутстрапа, отвечающий за модальные окна...
- Дмитрий Кузнецов, Я понял. Подскажите а как сделать чтоб это прогрузилось первее разметки?
Я попробовал сет тайм аут. но также есть задержка небольшая. - L1nw0od, setTimeout как раз таки делает задержку.
Подскажите а как сделать чтоб это прогрузилось первее разметки?
Ни как. Вы можете сначала подгрузить разметку, а потом сразу выполнить JS-код. Как же будет выводиться модалка, если не будет разметки, ведь модалка - это то же разметка)
- L1nw0od, А для чего вам это (вопрос явно к bootstrap не относится), что то типа антибота хотите сделать? Такое можно реализовать разделив страницы (есть страница тупо только с модалкой или каким то еще контентом) и страница непосредственно сайта куда пользователь потом перенаправляется, к пример после выполнения действия:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Антибот</title> </head> <body> <!-- Ваш контент сайта здесь --> <script> // Показываем заглушку с вопросом function showBotCheck() { const answer = window.confirm("Вы человек или бот?"); if (answer) { // Пользователь считается не ботом, разрешаем доступ window.location.href = "https://example.com/"; // Замените на нужную страницу } else { // Пользователь считается ботом, блокируем доступ alert("Доступ запрещен. Пожалуйста, подтвердите, что вы человек."); } } // Вызываем функцию при загрузке страницы window.onload = showBotCheck; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Антибот</title> </head> <body> <!-- Ваш контент сайта здесь --> <script> // Показываем заглушку с вопросом function showBotCheck() { const answer = window.confirm("Вы человек или бот?"); if (answer) { // Пользователь считается не ботом, разрешаем доступ window.location.href = "https://example.com/"; // Замените на нужную страницу } else { // Пользователь считается ботом, блокируем доступ alert("Доступ запрещен. Пожалуйста, подтвердите, что вы человек."); } } // Вызываем функцию при загрузке страницы window.onload = showBotCheck; </script> </body> </html>
В верхний div добавьте класс show и стиль display: block вот так:
<div class="modal fade class" id="exampleModal" style="display: block"> |
<div class="modal fade class" id="exampleModal" style="display: block">
Чтобы человек при заходе на сайт сразу увидел модальное окно, то в верхний div добавьте класс show и стиль display: block как подсказал выше Nik Faraday. Но вам судя по комментариям нужно немного другое: чтоб когда человек заходил на сайт оно автоматом открывалось при помощи JS ... и скорее всего не прям тут же, а с задержкой к примеру в пару секунд (по таймеру), тогда есть как минимум 3 варианта (JS):
- использование функции setTimeout
- использование события DOMContentLoaded
- использование события load
Вот пример JS 1го варианта, конкретно под Bootstrap 5:
// Получите ссылку на модальное окно const myModal = new bootstrap.Modal(document.getElementById('myModal')); // Откройте модальное myModal.show(); |
// Получите ссылку на модальное окно const myModal = new bootstrap.Modal(document.getElementById('myModal')); // Откройте модальное myModal.show();
Источники: web-revenue.ru, bootstrapdocs.ru (раздел FAQ).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания изначально открытого модального окна на Bootstrap 5, вам следует использовать некоторые дополнительные классы и JavaScript.
Вот пример кода, который поможет вам реализовать эту задачу:
<title>Bootstrap Modal</title> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade show" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Your content goes here. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div><title>Bootstrap Modal</title> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade show" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Your content goes here. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
В данном примере мы добавили класс "show" к элементу с классом "modal fade", чтобы сделать модальное окно изначально открытым. Также в кнопке для вызова модального окна добавлены атрибуты data-bs-toggle="modal" и data-bs-target="#exampleModal".
Не забудьте подключить Bootstrap CSS и JavaScript файлы для корректной работы модального окна. Кроме того, убедитесь, что вы используете правильные классы и атрибуты в вашем HTML коде.
Надеюсь, этот ответ поможет вам решить вашу проблему с созданием изначально открытого модального окна на Bootstrap 5. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.