在页面加载时启动引导模式

javascript html events twitter-bootstrap bootstrap-modal

2022-08-30 00:20:56

我根本不了解JavaScript。Bootstrap 文档说

通过 JavaScript 调用模态：$('#myModal').modal(options)

我不知道如何在页面加载时调用它。使用Bootstrap页面上提供的代码，我可以在元素单击时成功调用Modal，但我希望它在页面加载时立即加载。

答案 1

只需将要在页面加载时调用的模式包装在文档 head 部分的 jQuery 事件中，它就会弹出，如下所示：load

断续器

<script type="text/javascript">
    $(window).on('load', function() {
        $('#myModal').modal('show');
    });
</script>

断续器

<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>

答案 2

您不需要显示模态javascript

最简单的方法是将“隐藏”替换为“in”

class="modal fade hide"

所以

class="modal fade in"

并且您需要添加按钮关闭;onclick = "$('.modal').hide()"

PS：我认为最好的方法是添加jQuery脚本：

$('.modal').modal('show');