如何在頁面載入時自動啟動 Bootstrap 模態？-js教程-PHP中文網

如何在頁面載入時自動啟動 Bootstrap 模態？

Mary-Kate Olsen

發布： 2024-10-19 16:00:31

原創

946 人瀏覽過

How to Automatically Launch Bootstrap Modals upon Page Load?

頁面載入時自動啟動 Bootstrap 模態

Bootstrap 文件提供了使用 JavaScript 在頁面載入時啟動模態的解決方案。然而，對於那些不熟悉語言的人來說，實現可能具有挑戰性。

一個簡單的方法是在文件頭部分使用 jQuery load 事件。透過在此事件中包裝所需的模式，它將在頁面載入時自動顯示：

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

登入後複製

以下是如何使用此程式碼的範例：

<code class="html"><head>
    <script>
        $(window).on('load', function() {
            $('#myModal').modal('show');
        });
    </script>
</head>
<body>
    <div class="modal" id="myModal">...</div>
</body></code>

登入後複製

儘管使用了載入事件，您仍然可以使用以下HTML 在頁面內啟動模式：

<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></code>

登入後複製

按照這些說明，使用者可以在頁面載入時自動或透過頁面內的指定連結輕鬆啟動Bootstrap 模式。

以上是如何在頁面載入時自動啟動 Bootstrap 模態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何在頁面載入時自動啟動 Bootstrap 模態？