Analisis ringkas tentang penggunaan kotak modal dalam pembelajaran Bootstrap

Artikel ini akan membawa anda melalui kotak modal dalam Bootstrap dan memperkenalkan cara menukar saiz kotak modal dan memuatkan kandungan jauh dalam kotak modal saya harap ia akan membantu semua orang!

Dalam tutorial ini, kita akan membincangkan pemalam Bootstrap jQuery yang sangat berguna - Modal Box.

Bootstrap modal ialah pop timbul JavaScript pelbagai guna yang ringan yang boleh disesuaikan dan responsif. Anda boleh menggunakannya untuk memaparkan tetingkap amaran, video dan imej dalam tapak web anda. Tapak web yang dibina dengan Bootstrap boleh menggunakan modal untuk memaparkan terma dan syarat (sebagai sebahagian daripada proses pendaftaran), video dan juga widget media sosial.

Untuk memahaminya dengan lebih baik, mari kita lihat pelbagai komponen kotak modal Bootstrap. [Cadangan berkaitan: "tutorial bootstrap"]

Kotak modal Bootstrap terbahagi terutamanya kepada tiga bahagian: pengepala, badan dan pengaki halaman. Setiap bahagian mempunyai makna tersendiri, jadi kita harus menggunakannya dengan betul. Kami akan membincangkan perkara ini kemudian. Apakah perkara yang paling menarik tentang modal Bootstrap? Anda tidak perlu menulis sebarang kod JavaScript untuk menggunakannya! Semua kod dan gaya dipratentukan oleh Bootstrap. Apa yang anda perlu lakukan ialah menggunakan teg dan atribut yang betul untuk mencetuskannya.

Moddal lalai

Moddal lalai kelihatan seperti ini:

Untuk mencetuskan modal anda perlu menambah Pautan atau butang. Teg yang mencetuskan elemen mungkin kelihatan seperti ini:

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

Perhatikan bahawa elemen pautan mempunyai dua atribut data tersuai: data-toggle dan data-target. Togol memberitahu Bootstrap apa yang perlu dilakukan, dan sasaran memberitahu Bootstrap elemen yang hendak dibuka. Jadi apabila pautan sedemikian diklik, kotak modal dengan id "basicModal" akan muncul.

Sekarang mari kita lihat kod yang diperlukan untuk mentakrifkan modal:

<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">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <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>
  </div>
</div>

Div induk modal harus mempunyai ID yang sama seperti yang digunakan dalam elemen pencetus di atas. Dalam kes kami, ia adalah id="basicModal".

Nota: Atribut tersuai aria-labelledby dan aria-hidden dalam elemen modal induk menjadikannya boleh diakses. Amalan yang baik untuk menjadikan tapak web anda boleh diakses oleh semua orang, jadi anda harus menggunakan atribut ini kerana ia tidak akan menjejaskan kefungsian normal mod tersebut secara negatif.

Dalam kod HTML kotak modal, kita boleh melihat div pembalut bersarang dalam div kotak modal induk. Kelas div ini modal-content memberitahu bootstrap.js tempat untuk mencari kandungan modal. Di dalam div ini, kita perlu meletakkan tiga bahagian yang dinyatakan sebelum ini: pengepala, badan dan pengaki.

Pengepala kotak modal, seperti namanya, digunakan untuk menambah tajuk atau elemen lain seperti butang tutup "x" pada modal. Elemen ini juga harus mempunyai atribut data-dismiss yang memberitahu Bootstrap elemen yang hendak disembunyikan.

Kemudian mari kita lihat badan kotak modal. Anggap ia sebagai kanvas terbuka yang mana anda boleh menambah apa-apa jenis data, termasuk video YouTube, imej atau sebarang kandungan lain yang dibenamkan.

Akhir sekali, mari kita lihat pengaki modal. Kawasan ini dijajarkan ke kanan secara lalai. Di kawasan ini, anda boleh meletakkan butang operasi seperti "Simpan", "Tutup", "Terima", dll. Butang ini dikaitkan dengan tingkah laku yang perlu ditunjukkan oleh "kotak modal".

Tukar saiz kotak modal

Saya nyatakan sebelum ini bahawa kotak modal Bootstrap adalah responsif dan fleksibel. Kami akan melihat cara menukar saiznya dalam bahagian ini.

Kotak modal dalam Bootstrap 3.3.7 mempunyai dua gaya baharu: besar dan kecil. Tambahkan kelas pengubah suai modal-dialogdiv kepada divmodal-lg untuk mendapatkan kotak modal yang lebih besar dan tambah modal-sm untuk mendapatkan kotak modal yang lebih kecil.

Gunakan jQuery untuk mengaktifkan kotak modal

Kotak modal ialah pemalam jQuery, jadi jika anda ingin menggunakan jQuery untuk mengawal kotak modal, anda perlu memanggil .modal()Kaedah . Contohnya:

$('#basicModal').modal(options);

"Pilihan" di sini ialah objek JavaScript yang boleh dihantar kepada gelagat tersuai. Contohnya:

var options = {
    "backdrop" : "static"
}

Pilihan yang tersedia termasuk:

• backdrop：这可以是true或static。这定义你是否希望用户能够通过单击背景来关闭模态。
• keyboard：如果设置为true则模态框将通过ESC键关闭。
• show：用于打开和关闭模态框。它可以是true或false。
• remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Atas ialah kandungan terperinci Analisis ringkas tentang penggunaan kotak modal dalam pembelajaran Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!