在页面加载上启动引导模式

我根本不懂JavaScript。Bootstrap文档说到

通过JavaScript调用模态:$('#myModal').modal(options)

我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码，我可以成功地在元素单击上调用模态，但我希望它立即在页面加载上加载。

1026507 次浏览
小开
最佳答案

只需将你想要在页面加载时调用的模态包装在文档头部的jQuery load事件中，它就会弹出，如下所示:

JS

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

超文本标记语言

<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>
小开 
<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"
小开

你不需要javascript来显示模态

最简单的方法是将"hide"替换为"in"

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">&times;</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="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>


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

对我来说，这就是问题所在，希望能有所帮助

小开

在bootstrap 3中，你只需要通过js初始化模态，如果在页面加载的时刻，模态标记在页面中，模态就会显示出来。

如果你想防止这种情况，使用选项show: false初始化模态。就像这样: $('.modal').modal({ show: false }) < / p >
小开

在我的例子中，添加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更改为modal fade in，但没有成功。此外，将类从modal fade更改为modal show可以阻止模式关闭。

小开

你可能想要保持jquery.js延迟，以更快的页面加载。然而，如果jquery.js被延迟，$(window).load可能无法工作。那么你可以试试

setTimeout(function(){$('#myModal').modal('show');},3000);

它会在页面完全加载后弹出你的模态(包括jquery)

小开

使用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">&times;</button>
<h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>&nbsp; //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>

https://jsfiddle.net/d7utnsbm/

小开

您可以尝试这个可运行的代码-

. 
$(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">&times;</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>

更多可以在< a href = " http://getbootstrap.com/javascript/情态动词" > < / >在这里中找到。

我想你已经有了完整的答案。

小开

这里有一个解决方案[没有javascript初始化!］

我找不到一个例子没有初始化你的模式与javascript， $('#myModal').modal('show')，所以这里有一个关于如何实现它没有javascript延迟页面加载的建议。

  1. 用类和样式编辑你的modal容器div:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

  1. 编辑你的身体与类和风格:

    <body class="modal-open" style="padding-right:17px;"> < / p >

  2. 添加情态背景div

    <div class="modal-backdrop in"></div> < / p >

  3. < p >添加脚本

    $(document).ready(function() {
$('body').css('padding-right', '0px');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();


$('#MyModal').modal('show'); });

    会发生什么是html为您的模式将加载页面加载没有任何javascript，(没有延迟)。此时你不能关闭模式，这就是为什么我们有文档。准备好脚本，当所有东西都加载时，正确加载模式。实际上，我们将删除自定义代码，然后(再次)初始化模态，使用.modal('show')

小开

除了user2545728和Reft的答案，没有javascript但与modal-backdrop in . c

添加3件事

  1. 在.modal类之前有modal-backdrop in类的div
  2. style="display:block;"到.modal类
  3. fade in和.modal类一起使用

例子

<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>
小开

您可以通过数据属性激活模态，而不需要编写任何JavaScript。

选项"show"设为true显示初始化时的模态:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
小开

就像其他人提到的，用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>

希望这能有所帮助

小开

更新2021

引导5

现在Bootstrap不再需要jQuery，使用JavaScript显示模态很容易。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()

Demo

引导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>

Demo

小开
为了避免bootstrap被否决并失去它的功能，只需创建一个常规的启动按钮，提供一个Id，然后使用jquery“点击它”，如下所示: 启动按钮:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
See what´s new!
</button>

jQuery触发器:

$(document).ready(function () {
$('#btnAnouncement').click();
)}

希望能有所帮助。干杯!

小开

更新2020 -引导5

建立在优秀的回应从以前的答案，在Bootstrap 5没有jQuery，这已经工作;

document.querySelector('[data-target="#exampleModal"]').click();

完整的片段:

window.onload = () => {
document.querySelector('[data-target="#exampleModal"]').click();
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" />




<div class="container py-3">


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>


</div>

小开

我最近需要使用Django消息启动一个Bootstrap 5模态，不使用jQuery，也不使用按钮点击(例如，页面加载)。我是这样做的:

模板/ HTML

<div class="modal" id="notification">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Notification!</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{% for m in messages %}
\{\{ m }}
{% endfor %}
</div>
<div class="modal-footer justify-content-between">
<a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
type="button">
Link/Button A
</a>
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">
Link/Button B
</button>
</div>
</div>
</div>
</div>

JS文件或模板

{% block javascript %}
\{\{ block.super }}
<script>
var test_modal = new bootstrap.Modal(
document.getElementById('notification')
)
test_modal.show()
</script>
{% endblock javascript %}

这个方法在没有Django模板的情况下也可以工作;只需使用HTML并将JS放在一个文件或script元素中，这些元素在Bootstrap JS之后加载，在body元素结束之前加载。

小开

也许已经晚了，但是，一旦我不能解决这个订单问题，模态没有显示;我使用jquery点击();

我试过了，效果不错:)

创建一个按钮，调用Modal show >样式显示该按钮:none; 例子:< / p > 






$( "#clickme" ).click();
<html>
<head>
<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>
</head>
<body>
<input type="button" value="0"  id="clickme" style="display:none;" data-toggle="modal" data-target="#exampleModal" />
<!-- Modal -->
<div id="exampleModal" class="modal" role="dialog">
<div class="modal-dialog">


<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Clicked Successfully</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>


</body></html>

小开

你可以使用jQuery来处理这个问题

首先在模板上导入

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

然后用jQuery脚本在你的模式上点击id

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

这里是modal用于case显示的django消息

{% if messages %}
{% for message in messages %}
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
\{\{ message }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
        

{% endif %}

提交答案