我根本不懂javascript。引导文档说到
通过javascript调用模态:$('#myModal')。modal(options)
我不知道如何在页面加载时调用它。使用引导页面上提供的代码,我可以在单击元素时成功调用Modal,但我希望它在页面加载时立即加载。
答案 0 :(得分:360)
只需将页面加载时要调用的模式包装在文档头部的jQuery load
事件中,它就会弹出,如下所示:
<强> 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>
答案 1 :(得分:80)
您不需要javascript
来显示模态
最简单的方法是将“隐藏”替换为“in”
class="modal fade hide"
所以
class="modal fade in"
,您需要在按钮关闭时添加onclick = "$('.modal').hide()"
;
PS:我认为最好的方法是添加jQuery脚本:
$('.modal').modal('show');
答案 2 :(得分:39)
只需添加以下内容 -
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>
答案 3 :(得分:18)
你可以尝试这个可运行的代码 -
$(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>
可以找到更多 SFINAE 。
认为你有完整的答案。
答案 4 :(得分:7)
<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>
在我的情况下,问题是希望它有所帮助
答案 5 :(得分:6)
您只需通过数据属性即可激活模态而无需编写任何JavaScript。
选项“show”设置为true表示初始化时的模态:
<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
答案 6 :(得分:5)
在我的例子中添加jQuery来显示模态没有工作:
$(document).ready(function() {
$('#myModal').modal('show');
});
这似乎是因为模态具有属性aria-hidden =&#34; true&#34;:
<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
会阻止模式关闭。
答案 7 :(得分:5)
我无法找到一个示例没有使用javascript $('#myModal').modal('show')
初始化你的模态,所以继续提出如何在没有 javascript延迟的情况下实现它的建议页面加载。
<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的情况下在页面加载时加载(没有延迟)。此时你无法关闭模态,这就是为什么我们有document.ready脚本,以便在加载所有内容时正确加载模态。我们将实际删除自定义代码,然后使用.modal(&#39; show&#39;)初始化模式(再次)。
答案 8 :(得分:3)
<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,您也可以在启动时显示它。只需删除课程&#34;隐藏&#34;。
class="Modal"
答案 9 :(得分:3)
使用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>
答案 10 :(得分:2)
除了user2545728和Reft答案,没有javascript ,还有modal-backdrop in
要添加的3件事
modal-backdrop in
的div style="display:block;"
到.modal类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>
答案 11 :(得分:2)
在bootstrap 3中,您只需要通过js初始化模态,如果在页面加载时,模态标记位于页面中,模式将显示。
如果您想阻止这种情况,请使用初始化模式的选项show: false
。像这样的东西:
$('.modal').modal({ show: false })
答案 12 :(得分:2)
在先前答案的出色回答基础上,在没有jQuery的Bootstrap 5中,此方法有效;
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">×</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>
答案 13 :(得分:1)
与其他人提到的一样,用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>
希望这有帮助
答案 14 :(得分:1)
更新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>
答案 15 :(得分:0)
您可能希望延迟jquery.js
以加快页面加载速度。但是,如果延迟jquery.js
,则$(window).load
可能无效。然后你可以尝试
setTimeout(function(){$('#myModal').modal('show');},3000);
在页面完全加载(包括jquery)后会弹出你的模态
答案 16 :(得分:0)
<!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>
答案 17 :(得分:0)
如果您想在页面仍处于加载状态时显示模式,
$("modal_selector").modal("show")
功能内的呼叫 $("document").ready()
,
并在 $(window).on("load")
事件中在那里关闭!
为什么? 请参见:https://stackoverflow.com/a/3698214/9438347
答案 18 :(得分:0)
为了避免引导程序被推翻并失去其功能,只需创建一个常规的启动按钮,为其提供一个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();
)}
希望有帮助。干杯!
答案 19 :(得分:0)
我最近需要使用 Django 消息在没有 jQuery 的情况下启动 Bootstrap 5 模式,而不是通过单击按钮(例如,在页面加载时)。我就是这样做的:
模板/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
元素中,这些元素在 body
元素结束之前的 Bootstrap JS 之后加载。
答案 20 :(得分:0)
也许已经晚了,但是一旦我无法解决此订单问题,并且没有显示模态;我使用了 jquery click();
我试过了,效果很好:)
创建一个按钮,调用 Modal show > 样式该按钮为 display : none; 示例:
$( "#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">×</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>