Bagaimana untuk Menghalang Tatal Badan Apabila Menggunakan Modal dalam Bootstrap?

Mencegah Penatalan Badan Semasa Paparan Modal

Apabila menggunakan rangka kerja Bootstrap Modal daripada Twitter, anda mungkin menghadapi isu di mana penatalan badan diteruskan apabila dialog modal dibuka. Ini boleh mengecewakan pengguna.

Penyelesaian

Bootstrap secara automatik menambah kelas, "modal-open," pada badan apabila modal ditunjukkan. Anda boleh menggunakan ciri ini dengan menambahkan peraturan CSS pada helaian gaya anda:

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

Ini akan menghalang penatalan badan apabila mod dibuka.

Pertimbangan Versi Bootstrap

Perhatikan bahawa penyelesaian ini mempunyai had berdasarkan versi Bootstrap anda.

• Bootstrap 2.3.0 dan Kemudian: Twitter Bootstrap mengalih keluar "modal-open " kelas daripada badan dalam versi ini.

  • Penyelesaian: Anda boleh menambah kelas secara manual apabila modal dibuka dan mengalih keluarnya apabila ia ditutup. Ini boleh dicapai menggunakan jQuery seperti berikut:

  <code class="js">$("#myModal").on("show", function () {
      $("body").addClass("modal-open");
  }).on("hidden", function () {
      $("body").removeClass("modal-open")
  });</code>

  Salin selepas log masuk
• Bootstrap 3.0: Kelas "modal-open" dijangka akan kembali dalam versi 3.0 secara eksplisit untuk tujuan menghalang tatal.

Keserasian IE

Perhatikan bahawa penyelesaiannya serasi dengan IE7 , seperti yang telah anda nyatakan.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Tatal Badan Apabila Menggunakan Modal dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!