Главная » 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>

Вот и все!