Как сделать открытие модального окна в 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.
И что странного, то что в исходном коде браузера, его вообще нет.
При запуске с помощью кнопки все работает

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

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>
Написано более двух лет назад

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

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

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

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

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

Bootstrap

+1 ещё

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

ответов
CSS

+1 ещё

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

ответов
JavaScript

+3 ещё

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

ответ
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 19 часов назад
- 55 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 23 часа назад
- 184 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- вчера
- 99 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 67 просмотров
2

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Написать приложение калькулятор заказа материла ios + android (опция)

26 апр. 2024, в 15:30

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

Поддержка сервиса по рассылкам

26 апр. 2024, в 15:12

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

Unity AR прототип

26 апр. 2024, в 15:11

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

<!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 при загрузке страницы?

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

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

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