在页面加载时启动Bootstrap模式
我根本不知道JavaScript。 Bootstrap文档说
通过javascript调用模态：$（'＃myModal'）。modal（options）
我不知道如何调用这个页面加载。 使用引导页面上提供的代码，我可以成功地调用单元上的模态，但是我希望它在页面加载时立即加载。
只要将你要调用的模式包装在你的文档头部的jQuery load事件中的页面加载中，它应该popup，如下所示：
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来显示模式
最简单的方法是用“in”replace“hide”
class="modal fade hide"
所以
class="modal fade in"
你需要添加onclick = "$('.modal').hide()" on button close;
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>
你可以试试这个可运行的代码 –
$(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>
关于Andre的Ilich说你必须把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到modal fade in ，并没有工作。 另外，将modal fade到modal show的类别也会阻止模态被closures。
下面是一个解决scheme[没有JavaScript初始化！]
如果没有使用javascript， $('#myModal').modal('show')初始化你的模态，我找不到一个例子，所以inheritance人build议如何在页面加载时不拖延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，（没有延迟）。 在这一点上，你不能closures模式，所以这就是为什么我们有document.ready脚本，以加载模式正确加载时。 我们将实际移除自定义代码，然后使用.modal（'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的情况下展示它。 只要删除类“隐藏”。
class="Modal"
在bootstrap 3中，只需要通过js初始化模态，如果在页面加载的时候模态标记在页面中，模态将显示出来。
如果你想防止这种情况，请使用选项show: false在哪里初始化模态。 就像这样： $('.modal').modal({ show: false })
除了user2545728和Reft的答案， 没有JavaScript，但在modal-backdrop in
3件事添加
- 在.modal类之前的一个带有
modal-backdrop in的div -
style="display:block;"到模式类 - 与.modal类一起
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>
您可能希望保持jquery.js延迟更快的页面加载。 但是，如果jquery.js被延期$(window).load可能无法正常工作。 那么你可以试试
setTimeout(function(){$('#myModal').modal('show');},3000);
它会popup你的模式页面完全加载（包括jQuery）
HTML今天不适合我。
find这个解决scheme
<!-- 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>
