BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Запуск модального окна bootstrap3 при открытии страницы

Запуск модального окна bootstrap3 при открытии страницы

2019-03-06 / Вр:21:57 / просмотров: 7709

Сегодня столкнулся с ситуацией, когда заказчик захотел, чтобы всплывающее окно с формой открывалось через 10 сек. Сайт делал на bootstrap 3. Так что, если вы используете bootstrap3, эта статья для вас.
В сегодняшней статье я расскажу, как запустить модальное окно bootstrap3 сразу при открытии веб страницы.
А также расскажу, как запустить стандартное модальное окно bootstrap3 через указанное время.

Итак, вот код модального окна bootstrap 3 (подробно о модальном окне bootstrap 3 читайте тут):

<!-- Кнопка, открывающая модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button ENGINE="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Заголовок модального окна</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
Содержимое модального окна...
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

При нажатии по ссылке «Открыть модальное окно», откроется всплывающее окно. Но как сделать, чтобы окно открылось сразу при открытии веб страницы?
Достаточно добавить javaScript код:

<!-- Скрипт, вызывающий модальное окно после загрузки страницы -->
<script>
$(document).ready(function() {
$("#myModal").modal('show');
});
</script>

Вот полный код:

<!-- Скрипт, вызывающий модальное окно после загрузки страницы -->
<script>
$(document).ready(function() {
$("#myModal").modal('show');
});
</script>
<!-- Кнопка, открывающая модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Заголовок модального окна</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
Содержимое модального окна...
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

Теперь при открытии веб страницы, сразу откроется всплывающее окно, даже без нажатия кнопки «Открыть модальное окно».

Как сделать, чтобы окно открылось через указанное время?
Достаточно добавить javaScript код:

<!-- появление окна попандер через 10 сек.-->
<!-- Скрипт, вызывающий модальное окно после загрузки страницы -->
<script>
function explode(){
// $(document).ready(function() {
$("#myModal").modal('show');
// });
}
setTimeout(explode, 10000); //10000 это время, через которое нужно запустить функцию (1 секунд = 1000 миллисекунд)
</script>

После открытия веб страницы, всплывающее окно откроется после 10 сек.
Вот полностью код:

<!-- появление окна попандер через 10 сек.-->
<!-- Скрипт, вызывающий модальное окно после загрузки страницы -->
<script>
function explode(){
// $(document).ready(function() {
$("#myModal").modal('show');
// });
}
setTimeout(explode, 10000); //10000 это время, через которое нужно запустить функцию (1 секунд = 1000 миллисекунд)
</script>
<!-- Кнопка, открывающая модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Заголовок модального окна</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
Содержимое модального окна...
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

Вот и все!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

5 Ответов на комментарий - Запуск модального окна bootstrap3 при открытии страницы

  1. Sfera

    не работает

  2. Юрий

    Я думал, на Bootstrap 3 уже не делают, раз есть Bootstrap 4. Или это клиент так захотел? Или там есть какие-то особые достоинства? Я как-то её пропустил и начал разбираться сразу в 4-й версии.

  3. Avatar photo Степан => автор блога

    Не важно Bootstrap 3 или Bootstrap 4.
    Тут сама идея всплывающего окна после загрузки страницы )))
    Спасибо за комментарий

  4. Avatar photo Степан => автор блога

    Работает

  5. Вячеслав

    А как сделать чтобы через 10 секунд не модальное окно само открывалась, я появлялась сама кнопка для модального окна?

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716