首頁 >web前端 >js教程 >如何在沒有 JavaScript 的情況下在頁面載入時自動顯示 Bootstrap 模式?

如何在沒有 JavaScript 的情況下在頁面載入時自動顯示 Bootstrap 模式?

Patricia Arquette
Patricia Arquette原創
2024-10-19 15:57:30957瀏覽

How to Display a Bootstrap Modal Automatically on Page Load Without JavaScript?

在沒有JavaScript 知識的情況下在頁面加載時啟動Bootstrap 模態

Bootstrap 文件建議使用Javastrap 文件建議使用模態,但這對於那些不熟悉該語言的人。但是,即使不熟練使用 JavaScript,也可以在頁面載入時啟動模式。

解決方案:

要在頁面載入時立即顯示模式,請將其嵌入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">
    <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></code>

此程式碼確保ID 為「myModal」的模態方塊一旦出現頁面載入。

附加說明:

  • 您仍然可以透過新增以下連結來手動啟動模式:
<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></code>
  • 此方法無需任何JavaScript 依賴即可運作,非常適合喜歡避免編碼或對編碼了解有限的人。

以上是如何在沒有 JavaScript 的情況下在頁面載入時自動顯示 Bootstrap 模式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn