在页面加载时加载Bootstrap模态,而无需触发按钮或使用jQuery [英] Load Bootstrap modal on page load without firing button or using jQuery
本文介绍了在页面加载时加载Bootstrap模态,而无需触发按钮或使用jQuery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在页面加载时启动Bootstrap模式,而不触发HTML按钮或使用jQuery.
I'm trying to launch a Bootstrap modal on page load without firing a HTML button or using jQuery.
这是我的代码:
<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>
此功能在您致电
$('#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?
推荐答案
为.modal
创建CSS类并添加display:block
.还将in
类赋给模式div.
Create a CSS class for .modal
and add display:block
. Also give in
class to modal div.
Working Demo
CSS
.modal {
display:block;
}
HTML
<div id="my-modal" class="modal fade in">
某种程度上,默认关闭功能将不起作用,您需要为此添加自定义脚本.
Somehow default closing function will not work, you will need to add custom script for that.
这篇关于在页面加载时加载Bootstrap模态,而无需触发按钮或使用jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文