Как сделать изначалаьно открытое модальное окно на бутстрап 5?

Question

L1nw0od @L1nw0od

Как сделать изначалаьно открытое модальное окно на бутстрап 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>

Вопрос задан 06 мар.
86 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 3

5 комментариев

L1nw0od @L1nw0od Автор вопроса
Использвал в документации - не отрабатывает.

Срабатывает этот вариант:

$(window).on('load',function(){ $('#successfulRegistration').modal('show'); });

Но есть проблемка он срабатывает только как страница будет загружен - могли бы подсказать как сделать так чтоб он моментально срабатывал при открытии сайта - еще до момента прогрузки страницы?
Написано 06 мар.
Дмитрий Кузнецов @dima9595

L1nw0od, так наврятли получится. Т.к. сначала загружается разметка/стили страницы, потом скрипты и т.п.. Соответственно без разметки и скриптов - ни чего не запустится.

Как вариант, для ускорения - можете отказаться от jQuery (т.к. он то же сначала должен будет загрузиться), а использовать нативный JS. Но опять же, сначала должен будет подгрузиться код бутстрапа, отвечающий за модальные окна...

Написано 06 мар.
L1nw0od @L1nw0od Автор вопроса

Дмитрий Кузнецов, Я понял. Подскажите а как сделать чтоб это прогрузилось первее разметки?
Я попробовал сет тайм аут. но также есть задержка небольшая.

Написано 06 мар.
Дмитрий Кузнецов @dima9595

L1nw0od, setTimeout как раз таки делает задержку.

Подскажите а как сделать чтоб это прогрузилось первее разметки?

Ни как. Вы можете сначала подгрузить разметку, а потом сразу выполнить JS-код. Как же будет выводиться модалка, если не будет разметки, ведь модалка - это то же разметка)

Написано 06 мар.

Алексей Голягин @webrevenue

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>

Написано 12 мар.

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как мне сделать чтобы slick slider чтобы отображалось 3 элемента и скроллить по 3?
- 1 подписчик
- 54 минуты назад
- 9 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 9 часов назад
- 40 просмотров
0

ответов
JavaScript

Простой
По какой логике bind принимает только первый контекст?
- 1 подписчик
- 14 часов назад
- 85 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 15 часов назад
- 28 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- 16 часов назад
- 31 просмотр
0

ответов
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- 17 часов назад
- 41 просмотр
3

ответа
JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 18 часов назад
- 28 просмотров
0

ответов
Bootstrap

+1 ещё

Простой
Как правильно скопировать google карту в модальное окно и добавить в неё указатели?
- 1 подписчик
- 20 часов назад
- 12 просмотров
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 22 часа назад
- 53 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 22 часа назад
- 57 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Подключить сервер к сети

27 апр. 2024, в 02:39

2500 руб./за проект

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

1500 руб./за проект

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

15000 руб./за проект

Попробуйте может так
<div class="modal fade open">...</div>
Как сделать изначалаьно открытое модальное окно на бутстрап 5?

Подскажите как сделать так чтоб когда человек заходил на сайт оно автоматом открывалось?

Так оно должно быть "изначально открыто" или должно "открываться"?

Answer 1 · 2024-03-06 10:49:59

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

https://getbootstrap.com/.../modal/#via-javascript
https://getbootstrap.com/.../modal/#methods

Ответ написан 06 мар.

5 комментариев

Answer 2 · 2024-03-06 15:18:12

В верхний div добавьте класс show и стиль display: block вот так:

<div class="modal fade class" id="exampleModal" style="display: block">

Answer 3 · 2024-03-12 06:42:35

Чтобы человек при заходе на сайт сразу увидел модальное окно, то в верхний 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();

Источники: web-revenue.ru, bootstrapdocs.ru (раздел FAQ).

Как сделать изначалаьно открытое модальное окно на бутстрап 5?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт