Bagaimana untuk Melancarkan Modal Bootstrap Secara Automatik Apabila Halaman Dimuatkan?

Cara Melancarkan Modal Bootstrap secara Automatik pada Pemuatan Halaman

Bootstrap menawarkan tetingkap mod serba boleh untuk meningkatkan interaksi pengguna. Sebagai pemula dalam JavaScript, anda mungkin menghadapi cabaran untuk mengaktifkan modal pada pemuatan halaman. Mari kita mendalami pendekatan praktikal untuk menangani keperluan ini.

Menurut dokumentasi Bootstrap, modals boleh digunakan melalui JavaScript menggunakan sintaks '$('#myModal').modal(options)'. Walau bagaimanapun, dokumentasi tidak memperincikan secara eksplisit cara mengaktifkan modal pada pemuatan halaman.

Untuk menyelesaikan masalah ini, benamkan modal dalam acara pemuatan jQuery yang diletakkan di bahagian kepala dokumen. Ini memastikan bahawa modal muncul sebaik sahaja halaman selesai dimuatkan. Berikut ialah contoh:

JS

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

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>

Dengan persediaan ini, modal akan secara automatik muncul apabila halaman dimuatkan. Selain itu, anda masih boleh menggunakan modal melalui elemen pencetus (cth., pautan):

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

Ringkasnya, membenamkan modal dalam acara beban jQuery menyediakan cara yang mudah untuk memaparkan modal serta-merta pada pemuatan halaman , walaupun untuk pemula JavaScript.

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