Запустить Bootstrap Modal при загрузке страницы
Я вообще не знаю javascript. В документации bootstrap говорится:
вызов модального через javascript: $('#myModal').modal (options)
Я понятия не имею, как это назвать при загрузке страницы. Используя предоставленный код на странице начальной загрузки, я могу успешно вызвать модальный щелчок по элементу, но я хочу, чтобы он немедленно загрузился при загрузке страницы.
16 ответов
просто оберните модальный, который вы хотите вызвать при загрузке страницы внутри jQuery load
событие в разделе head вашего документа, и оно должно всплывать, например:
JS
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
HTML-код
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
вы все еще можете вызвать модальный на своей странице, вызвав его по ссылке:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
не нужно javascript
показать модальное
самый простой способ-заменить "спрятать" на "в"
class="modal fade hide"
так
class="modal fade in"
и нужно добавить onclick = "$('.modal').hide()"
на кнопку Закрыть;
PS: Я думаю, что лучший способ-добавить скрипт jQuery:
$('.modal').modal('show');
просто добавьте следующий-
class="modal show"
Рабочий Пример-
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal show" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
вы можете попробовать этот runnable код -
$(window).load(function()
{
$('#myModal').modal('show');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
больше можно найти здесь.
думаю, у вас есть полный ответ.
относительно того, что говорит Андре Ильич, вы должны добавить в JS скрипт после строки в том, что вы называете jquery:
<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
в моем случае это была проблема, надеюсь, это поможет
в моем случае добавление jQuery для отображения модального не сработало:
$(document).ready(function() {
$('#myModal').modal('show');
});
который, казалось, был потому, что модальный имел атрибут aria-hidden= "true":
<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
удаление этого атрибута было необходимо, а также jQuery выше:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
обратите внимание, что я попытался изменить модальные классы из modal fade
to modal fade in
, и это не сработало. Кроме того, изменение классов с modal fade
to modal show
остановил модальное от возможности быть закрытым.
Heres решение [без инициализации javascript!]
Я не мог найти пример без инициализация модального с помощью javascript,$('#myModal').modal('show')
, поэтому вот предложение о том, как вы могли бы реализовать его без задержка javascript при загрузке страницы.
- изменить свой модальный контейнер div с классом и стилем:
<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">
-
отредактируйте свое тело с помощью класса и стиль:
<body class="modal-open" style="padding-right:17px;">
-
добавить модальный фон div
<div class="modal-backdrop in"></div>
-
добавить скрипт
$(document).ready(function() { $('body').css('padding-right', '0px'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#MyModal').modal('show'); });
что произойдет, так это то, что html для вашего модального будет загружен на загрузку страницы без какого-либо javascript (без задержки). На данный момент Вы не можете закрыть модальное, поэтому у нас есть документ.готовый скрипт, чтобы правильно загрузить модал, когда все загружено. Мы фактически удалим пользовательский код и затем инициализируйте модальное, (снова), с помощью.модальный('show').
вы можете активировать модальный без написания JavaScript просто с помощью атрибутов данных.
параметр "show", установленный в true, показывает модальное значение при инициализации:
<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><i class="icon-spinner icon-spin icon-4x"></i></p>
</div>
</div>
вы можете показать его при запуске даже без Javascript. Просто удалите класс "hide".
class="Modal"
в bootstrap 3 вам просто нужно инициализировать модальный через js, и если в момент загрузки страницы модальная разметка находится на странице, модальный появится.
Если вы хотите предотвратить это, используйте опцию show: false
где вы инициализируете модальный. Что-то вроде этого:
$('.modal').modal({ show: false })
в дополнение к ответам user2545728 и Reft,без javascript но с modal-backdrop in
3 вещи, чтобы добавить
- div с классами
modal-backdrop in
перед .модальный класс -
style="display:block;"
на .модальный класс -
fade in
вместе с .модальный класс
пример
<div class="modal-backdrop in"></div>
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="channelModal">Welcome!</h4>
</div>
<div class="modal-body" style="height:350px;">
How did you find us?
</div>
</div>
</div>
</div>
протестировано с помощью Bootstrap 3 и jQuery (2.2 и 2.3)
$(window).on('load',function(){
$('#myModal').modal('show');
});
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-exclamation-circle"></i> //Your modal Title</h4>
</div>
<div class="modal-body">
//Your modal Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
вы можете сохранить jquery.js
отложено для более быстрой загрузки страницы. Однако, если jquery.js
отложено на $(window).load
может не работать. Тогда вы можете попробовать
setTimeout(function(){$('#myModal').modal('show');},3000);
он будет всплывать ваш модальный после полной загрузки страницы (включая jquery)
как и другие упоминали, создайте свой модальный с display: block
<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...
поместите фон в любом месте на Вашей странице, это не обязательно должно быть в нижней части страницы
<div class="modal-backdrop fade show"></div>
затем, чтобы снова закрыть диалоговое окно, добавьте это
<script>
$("button[data-dismiss=modal]").click(function () {
$(".modal.in").removeClass("in").addClass("fade").hide();
$(".modal-backdrop").remove();
});
</script>
надеюсь, что это помогает
Обновление 2018-Bootstrap 4
модальная разметка немного изменилась для Bootstrap 4. Вот как вы можете открыть модальный при загрузке страницы и, возможно, задержать отображение модального...
$(window).on('load',function(){
var delayMs = 1500; // delay in milliseconds
setTimeout(function(){
$('#myModal').modal('show');
}, delayMs);
});
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
простой пример сделайте загрузчик spinner из модального загрузчика
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myModal').modal('show');
setTimeout(function(){
$('#myModal').modal('hide');
}, 5000);
});
</script>
<style>
.loader {
border: 13px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
margin: 10% auto;
}
.modal-content{
background-color: transparent;
border: 0;
border-radius: 0;
outline: 0;
box-shadow: none;
}
</style>
</head>
<body>
<div class="container">
<!-- Modal -->
<div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="loader"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>