Bagaimana untuk Melancarkan Modals Bootstrap Secara Automatik semasa Pemuatan Halaman?-tutorial js-php.cn

Bagaimana untuk Melancarkan Modals Bootstrap Secara Automatik semasa Pemuatan Halaman?

Mary-Kate Olsen

Lepaskan： 2024-10-19 16:00:31

asal

1073 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!