twitter-bootstrap 在页面加载时加载 Bootstrap 模式，无需触发按钮或使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20794363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load Bootstrap modal on page load without firing button or using jQuery
提问by Sai Kiran Sripada
I'm trying to launch a Bootstrap modal on page load without firing a HTML button or using jQuery.
我正在尝试在页面加载时启动 Bootstrap 模式，而不触发 HTML 按钮或使用 jQuery。
Here's my code:
这是我的代码：
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div id="my-modal" 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">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
This works when you call
这在你打电话时有效
$('#my-modal').modal('show');
But I don't want to call a method or fire a button. Is there a way to launch modal automatically on page load?
但我不想调用方法或触发按钮。有没有办法在页面加载时自动启动模态？
Demo: Fiddle
演示：小提琴
回答by Surjith S M
Create a CSS class for .modaland add display:block. Also give inclass to modal div.
为 . 创建一个 CSS 类.modal并添加display:block. 也给in模态div类。
CSS
CSS
.modal {
display:block;
}
HTML
HTML
<div id="my-modal" class="modal fade in">
Edit:Somehow default closing function will not work, you will need to add custom script for that.
编辑：不知何故，默认关闭功能不起作用，您需要为此添加自定义脚本。
回答by Blackslaine
I spent some time trying to accommodate this and found that this worked fine for my needs which incorporated a single login page... Obviously this is not the finished article but an excellent base from which I was able to start with. Hope it is of some use to someone...
我花了一些时间试图适应这一点，发现这对我的需求很有效，它包含一个登录页面......显然这不是完成的文章，而是我能够开始的一个很好的基础。希望它对某人有用...
<body style="background: #555;">
<!-- Modal -->
<div class="modal-dialog" style="margin-top: 20%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div>
</body>
回答by TwixtedChaox
You could utilize the page onload function
您可以利用页面加载功能
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<body onLoad="$('#my-modal').modal('show');">
<div id="my-modal" 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">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
</body>
回答by charsi
On Bootstrap 4 --
在 Bootstrap 4 上——
Add the show class to your modal
将 show 类添加到您的模态
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
and following css --
并遵循CSS -
.modal {
display:block;
}
回答by Валентин Авдеев
<div id="modal1" class="modal" data-show role="dialog">
data-showhelp you
数据显示帮助你
