Bagaimana untuk Melancarkan Modal Bootstrap Secara Automatik pada Muatan Halaman?

Lancarkan Modal Bootstrap pada Muatan Halaman

Bootstrap menyediakan cara mudah untuk mencipta tetingkap timbul mod, tetapi ia memerlukan pengetahuan JavaScript asas. Bagi pemula, ini boleh membingungkan, terutamanya apabila cuba melancarkan modal pada pemuatan halaman secara langsung.

Memahami Dokumentasi

Dokumentasi Bootstrap mencadangkan memanggil modal dengan $ ('#myModal').modal(pilihan). Walau bagaimanapun, menentukan cara menggunakan kod ini untuk senario pemuatan halaman boleh mengelirukan.

Penyelesaian

Untuk melancarkan modal Bootstrap serta-merta selepas halaman dimuatkan, bungkusnya dalam acara memuatkan jQuery dalam bahagian dokumen anda. Ini secara automatik akan mencetuskan modal apabila halaman dimuatkan.

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

Pastikan HTML anda menyertakan modal dengan kelas dan struktur yang diperlukan:

<code class="html"><div class="modal hide fade" id="myModal">
  <!-- Modal Header -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>

  <!-- Modal Body -->
  <div class="modal-body">
    ...
  </div>

  <!-- Modal Footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div></code>

Sementara kaedah ini secara automatik membuka modal pada pemuatan halaman, anda masih boleh mencetuskan modal secara manual menggunakan butang atau pautan dengan kod berikut:

<code class="html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button></code>

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