在页面加载时加载 Bootstrap 模式，无需触发按钮或使用 jQuery答案

【问题标题】：Load Bootstrap modal on page load without firing button or using jQuery在页面加载时加载 Bootstrap 模式，无需触发按钮或使用 jQuery
【发布时间】：2022-03-10 21:02:53
【问题描述】：

我正在尝试在不触发 HTML 按钮或使用 jQuery 的情况下在页面加载时启动 Bootstrap 模式。

这是我的代码：

<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">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Hello World!
            </div>
        </div>
    </div> 
</div>

这在你调用时有效

$('#my-modal').modal('show');

但我不想调用方法或触发按钮。有没有办法在页面加载时自动启动模式？

演示：Fiddle

【问题讨论】：

标签： twitter-bootstrap bootstrap-modal

【解决方案1】：

为.modal 创建一个CSS 类并添加display:block。还将in 类赋予模态div。

Working Demo

CSS

.modal {
  display:block;
}

HTML

<div id="my-modal" class="modal fade in">

编辑：默认关闭功能不起作用，您需要为此添加自定义脚本。

【讨论】：

太棒了！它正在工作。非常感谢您的快速回复和修复！
我认为你应该避免直接编辑 bootstrap.css。最好使用 jQuery 或在您自己的 css 文件中创建一个新类。
这可行，但会阻止使用data-dismiss 关闭模式。

【解决方案2】：

我花了一些时间尝试适应这一点，并发现这很适合我的需要，它包含一个登录页面......显然这不是完成的文章，而是我能够开始的一个很好的基础。希望它对某人有用...

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

【讨论】：

【解决方案3】：

您可以使用页面加载功能

<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">&times;</button>
                <h4 class="modal-title">Title</h4>
                </div>
                <div class="modal-body">
                    Hello World!
                </div>
            </div>
        </div> 
    </div>
</body>

【讨论】：

问题的标题是“没有jquery”！

【解决方案4】：

在 Bootstrap 4 上 --

将显示类添加到您的模态

<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

和下面的css --

.modal {
    display:block;
  }

【讨论】：

这与 2013 年接受的答案完全相同，并且存在同样的问题，即关闭按钮现在可以正常工作
你可能不包括bootstrap的js。这是解除功能所必需的。
我包含了 Bootstrap 的 JS，但 OP 的问题是如何在不使用 jQuery 的情况下做到这一点，而 Bootstrap 的 JS 使用了 jQuery
我认为dismiss功能需要js。
是的，但最好不要使用 jQuery :)

【解决方案5】：

在 Bootstrap 5 上，只需使用选项创建一个模态变量并使用 .show() 运行它

var myModal = new bootstrap.Modal(document.getElementById('modal'), {keyboard: false, backdrop: 'static'});
myModal.show();

没有Jquery，你不能使用这个；

myModal.modal('show');

【讨论】：

【解决方案6】：

<div id="modal1" class="modal" data-show role="dialog">

数据展示帮助你

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或如何回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。
这个答案没有像@TobySpeight 所说的那样回答问题，因为在后台将使用 JQuery。