Как сделать открытие модального окна в bootstrap при загрузке страницы?

Question

Канат @harasaev

Как сделать открытие модального окна в bootstrap при загрузке страницы?

Модальное окно прописываю так:

<div class="modal fade in" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

но при загрузке страницы ничего не происходит. Js подключены файлы bootstrap.min.js и jquery.
И что странного, то что в исходном коде браузера, его вообще нет.
При запуске с помощью кнопки все работает

Вопрос задан более трёх лет назад
5723 просмотра

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

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

Павел @mrusklon

весь код в студию

Написано более трёх лет назад

Канат @harasaev Автор вопроса

<!doctype html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link href="/public/style.css" rel="stylesheet">
    <title><?= $title; ?></title>
  </head>
  <body>
<!-- Modal -->
<div class="modal fade in" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<?= $body; ?>
<script src="/public/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="/public/bootstrap.min.js"></script>
</body>
</html>

Написано более трёх лет назад

Решения вопроса 1

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

Канат @harasaev Автор вопроса

также не работает

Написано более трёх лет назад
Павел @PavelMonro

Канат, код?

Написано более трёх лет назад

Канат @harasaev Автор вопроса

Павел,

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Написано более трёх лет назад

Павел @PavelMonro

Канат, https://jsfiddle.net/21nhzfbq/

Написано более трёх лет назад
Никита @Nikita_Sergeevich
Добавлю для тех, кто столкнулся с той же проблемой, что и Канат, не забудьте подключить jQuery и скрипт из примера Павла должен идти после его подключения.

Для тех, кто любит готовенькое, добавьте над скриптом строчку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Написано более двух лет назад

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

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

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

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

HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 7 часов назад
- 50 просмотров
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 16 часов назад
- 67 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 19 часов назад
- 69 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 201 просмотр
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 110 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 111 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 112 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 62 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Передача конверсий из AmoCRM на новую сделку и продажу

26 нояб. 2024, в 11:57

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

Сверстать по макету

26 нояб. 2024, в 11:39

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

Перенести сайт с правками на другую платформу

26 нояб. 2024, в 10:57

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

<!doctype html> <html lang="ru"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="/public/style.css" rel="stylesheet"> <title><?= $title; ?></title> </head> <body>  <div class="modal fade in" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <?= $body; ?> <script src="/public/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="/public/bootstrap.min.js"></script> </body> </html>

Answer 1 · 2019-02-24 11:33:43

Так а где вызов скрипта чтобы окно при загрузке открывалось? Соответственно id добавьте окну своему

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

Как сделать открытие модального окна в bootstrap при загрузке страницы?

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

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

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