Memahami modal bootstrap

kotak modal bootstrap: ringan, tetingkap pop timbul yang disesuaikan

kotak modal bootstrap adalah pemalam jQuery bootstrap yang ringan, disesuaikan dan responsif untuk memaparkan popup, video, imej, dan banyak lagi. Ia dibahagikan kepada tiga bahagian: tajuk, badan dan footer, masing -masing dengan fungsi yang unik. Tidak perlu menulis kod JavaScript, kerana semua kod dan gaya dipreditkan oleh bootstrap.

Ciri -ciri Utama:

• ringan dan responsif: Kotak modal direka dengan mudah dan dipaparkan dengan baik pada semua peranti.
• Sangat disesuaikan: Anda boleh mengubah saiz, menambah kandungan dinamik, dan juga membuatnya boleh ditatal.
• Tiada kod JavaScript yang diperlukan: Bootstrap mempredikan semua kod dan gaya yang diperlukan.
• sokongan acara yang kaya: anda boleh menggunakan kaedah JQuery's untuk mengikat pelbagai peristiwa, seperti .on(), show.bs.modal, shown.bs.modal, dan hide.bs.modal, untuk mencapai lebih banyak granularity kawalan. hidden.bs.modal
• boleh mengelakkan klik luaran dari penutupan: dengan menetapkan pilihan untuk backdrop, anda boleh menghalang pengguna daripada mengklik di luar kotak modal untuk menutupnya. 'static'

Struktur kotak modal:

Kotak modal bootstrap lalai adalah seperti berikut:

Kotak Modal Pencetus:

Anda boleh menggunakan pautan atau butang untuk mencetuskan kotak modal. Penanda untuk elemen pencetus mungkin kelihatan seperti ini:

Perhatikan bahawa elemen pautan mempunyai dua sifat data tersuai:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

dan

. data-toggle Beritahu bootstrap apa yang perlu dilakukan, data-target beritahu bootstrap yang elemen dibuka. Oleh itu, apabila pautan tersebut diklik, kotak modal dengan id "BasicModal" muncul. data-toggle data-target

Kod Kotak Modal:

Berikut adalah tanda yang diperlukan untuk menentukan kotak modal itu sendiri:

Div induk kotak modal hendaklah sama dengan ID yang digunakan dalam elemen pencetus di atas. Dalam kes ini, ia adalah

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

. Ciri -ciri

dan https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal digunakan untuk akses dan disyorkan untuk dikekalkan. aria-labelledby aria-hidden

Laraskan saiz kotak modal:

Anda boleh menukar saiz kotak modal dengan menambahkan kelas pengubah ke

div:

(kotak modal besar) atau .modal-dialog (kotak modal kecil). modal-lg modal-sm

Gunakan jQuery untuk mengaktifkan kotak modal:

anda boleh menggunakan fungsi JQuery's

untuk mengawal kotak modal:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

options adalah objek JavaScript yang digunakan untuk menyesuaikan tingkah laku, seperti:

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

Pilihan lain yang tersedia ialah: keyboard, show dan focus.

acara kotak modal bootstrap:

Anda boleh menggunakan kaedah JQuery's .on() untuk mengikat pelbagai peristiwa untuk menyesuaikan lagi tingkah laku kotak modal bootstrap.

Ringkasan:

kotak modal bootstrap adalah salah satu plugin terbaik yang disediakan oleh Bootstrap. Untuk pereka pemula, ini adalah salah satu cara terbaik untuk memuatkan kandungan dalam popup tanpa menulis sebarang kod JavaScript.

(berikut adalah bahagian FAQ, yang telah ditulis semula dan diselaraskan mengikut teks asal)

FAQ:

• Apakah tujuan kotak modal bootstrap? digunakan untuk membuat maklumat paparan pop timbul tanpa pengguna meninggalkan halaman semasa.

• Bagaimana menggunakan JavaScript untuk mencetuskan kotak modal bootstrap? Gunakan kaedah .modal('show'), seperti $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');.

• Bagaimana untuk menutup kotak modal bootstrap menggunakan JavaScript? Gunakan kaedah .modal('hide'), seperti $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('hide');.

• Bagaimana untuk menyesuaikan penampilan kotak modal bootstrap? Anda boleh menggunakan nama kelas (seperti .modal-lg, .modal-sm, kelas warna bootstrap) untuk menyesuaikan.

• Bolehkah pelbagai kotak modal digunakan pada halaman yang sama? Ya, tetapi hanya satu yang boleh dipaparkan pada satu masa.

• Bagaimana untuk menambah animasi ke kotak modal bootstrap? Anda boleh menggunakan perpustakaan CSS atau JavaScript (seperti Animate.css).

• Bagaimana untuk memuatkan kandungan dinamik ke dalam kotak modal bootstrap? Ajax boleh didapati.

• bagaimana membuat kotak modal bootstrap scrollable? Gunakan kelas .modal-dialog-scrollable.

• Bagaimana untuk mencegah pengguna mengklik luaran untuk menutup kotak modal bootstrap? Tetapkan pilihan backdrop untuk 'static'.

• Adakah kotak modal bootstrap menyokong peranti mudah alih? disokong dan responsif.

Atas ialah kandungan terperinci Memahami modal bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!