如何在頁面載入時自動啟動 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中文網其他相關文章！