Rumah > Artikel > hujung hadapan web > Bagaimana untuk Melancarkan Modals Bootstrap Secara Automatik semasa Pemuatan Halaman?

Bagaimana untuk Melancarkan Modals Bootstrap Secara Automatik semasa Pemuatan Halaman?

Mary-Kate Olsenasal: 2024-10-19 16:00:31947semak imbas

How to Automatically Launch Bootstrap Modals upon Page Load?

Lancarkan Modal Bootstrap Secara Automatik semasa Pemuatan Halaman

Dokumentasi Bootstrap menyediakan penyelesaian untuk melancarkan modal semasa memuatkan halaman menggunakan JavaScript. Walau bagaimanapun, bagi mereka yang tidak biasa dengan bahasa tersebut, pelaksanaannya boleh mencabar.

Satu kaedah mudah ialah menggunakan acara pemuatan jQuery dalam bahagian kepala dokumen. Dengan membungkus modal yang diingini dalam acara ini, ia akan muncul secara automatik apabila halaman dimuatkan:

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

Berikut ialah contoh cara menggunakan kod ini:

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

Walaupun menggunakan acara pemuatan , anda masih boleh melancarkan modal dalam halaman menggunakan HTML berikut:

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

Dengan mengikut arahan ini, pengguna boleh melancarkan mod Bootstrap dengan mudah sama ada secara automatik apabila halaman dimuatkan atau melalui pautan yang ditetapkan dalam halaman.

Atas ialah kandungan terperinci Bagaimana untuk Melancarkan Modals Bootstrap Secara Automatik semasa Pemuatan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery bootstrap html for using Event this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Melancarkan Modal Bootstrap Secara Automatik pada Muatan Halaman?Artikel seterusnya：Bagaimana untuk Melancarkan Modal Bootstrap Secara Automatik pada Muatan Halaman?

Artikel berkaitan

Lihat lagi