Bagaimana untuk Melancarkan Modal Bootstrap secara Automatik pada Pemuatan Halaman untuk Pengguna Bukan JavaScript?

Lancarkan Bootstrap Modal Secara Automatik pada Pemuatan Halaman untuk Pengguna Bukan JavaScript

Dokumentasi Bootstrap mencadangkan penggunaan JavaScript untuk melancarkan modal menggunakan sintaks berikut:

<code class="javascript">$('#myModal').modal(options)</code>

Bagi mereka yang tidak biasa dengan JavaScript, ini boleh menjadi tugas yang sukar. Berikut ialah penyelesaian mesra pemula yang membolehkan anda melancarkan modal serta-merta pada pemuatan halaman tanpa sebarang pengetahuan JavaScript:

1. Balutkan modal dalam acara pemuatan jQuery:

Dalam bahagian dokumen HTML anda, tambahkan kod berikut:

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

2. Sertakan HTML untuk modal:

Dalam dokumen HTML anda, tambah kod berikut untuk mentakrifkan modal:

<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 mentakrifkan dialog modal mudah dengan pengepala, badan dan pengaki. Anda boleh menyesuaikan kandungan seperti yang dikehendaki.

Selepas menambah elemen ini, modal akan muncul secara automatik apabila halaman dimuatkan.

Nota: Anda masih boleh melancarkan modal secara manual menggunakan pautan dengan sintaks berikut:

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

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