我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
当前回答
在我的例子中,添加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">
请注意,我尝试将模态类从模态渐变更改为模态渐变,但这并不奏效。此外,将模态淡出类更改为模态显示类也阻止了模态关闭。
其他回答
关于安德烈的伊里奇说你必须补充 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>
对我来说,这就是问题所在,希望能有所帮助
在我的例子中,添加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">
请注意,我尝试将模态类从模态渐变更改为模态渐变,但这并不奏效。此外,将模态淡出类更改为模态显示类也阻止了模态关闭。
你可以使用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 %}
你可能想要保持jquery.js延迟,以更快的页面加载。但是,如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试
setTimeout(function(){$('#myModal').modal('show');},3000);
它会在页面完全加载后弹出你的模态(包括jquery)
就像其他人提到的,用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>
希望这能有所帮助