如何在页面加载时自动启动 Bootstrap 模式？

在页面加载时启动 Bootstrap 模态

Bootstrap 提供了一种创建模态弹出窗口的简单方法，但它需要一些基本的 JavaScript 知识。对于初学者来说，这可能会让人望而生畏，尤其是在尝试直接在页面加载时启动模式时。

了解文档

Bootstrap 文档建议使用 $ 调用模式('#myModal').modal(选项)。但是，确定如何在页面加载场景中使用此代码可能会令人困惑。

解决方案

要在页面加载后立即启动 Bootstrap 模式，请将其包装在

中的 jQuery 加载事件您文档的部分。这将在页面加载时自动触发模式。

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

确保您的 HTML 包含具有必要类和结构的模式：

<code class="html"><div class="modal hide fade" id="myModal">
  <!-- Modal Header -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>

  <!-- Modal Body -->
  <div class="modal-body">
    ...
  </div>

  <!-- Modal Footer -->
  <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></code>

虽然此方法会自动打开页面加载时的模式，您仍然可以使用按钮或带有以下代码的链接手动触发模式：

<code class="html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button></code>

以上是如何在页面加载时自动启动 Bootstrap 模式？的详细内容。更多信息请关注PHP中文网其他相关文章！