Bagaimana untuk Memaparkan Modal Bootstrap Secara Automatik pada Pemuatan Halaman Tanpa JavaScript?

Melancarkan Bootstrap Modal pada Pemuatan Halaman Tanpa Pengetahuan JavaScript

Dokumentasi Bootstrap menasihati menggunakan JavaScript untuk melancarkan modal, tetapi ia boleh membingungkan untuk mereka yang tidak mengenali bahasa tersebut. Walau bagaimanapun, melancarkan modal pada pemuatan halaman adalah mungkin walaupun tanpa kemahiran JavaScript.

Penyelesaian:

Untuk memaparkan modal serta-merta selepas halaman dimuatkan, benamkannya dalam beban jQuery acara dalam bahagian kepala dokumen:

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

Kod 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>

Kod ini memastikan bahawa modal dengan ID "myModal" muncul sebaik sahaja halaman dimuatkan.

Nota Tambahan:

• Anda masih boleh melancarkan modal secara manual dengan menambahkan pautan seperti ini:

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

• Kaedah ini berfungsi tanpa sebarang kebergantungan JavaScript dan sesuai untuk mereka yang memilih untuk mengelakkan pengekodan atau mempunyai pengetahuan terhad tentangnya.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Modal Bootstrap Secara Automatik pada Pemuatan Halaman Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!