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

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

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 2 часа назад
- 36 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- 20 часов назад
- 71 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как центрировать индикатор внутри дуги, JS?
- 1 подписчик
- вчера
- 70 просмотров
0

ответов
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 234 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 46 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 80 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 92 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 200 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 94 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 82 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Допил JS-PHP парсера

22 дек. 2024, в 16:26

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

Прогнозирование поломок с помощью модели ARIMA на имеющемся датасете

22 дек. 2024, в 15:29

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

Разработать Extension для Google Chrome Webstore

22 дек. 2024, в 14:07

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?

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

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

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