Menggunakan jQuery dan Bootstrap untuk melaksanakan pelbagai lapisan, mod suai windows_jquery

Artikel ini mempraktikkan tetingkap mod berbilang lapisan, dan ia adalah penyesuaian.

Klik butang pada halaman untuk muncul lapisan pertama tetingkap mod adaptif.

Mengandungi butang dalam tetingkap modal lapisan pertama Klik butang untuk muncul tetingkap modal lapisan kedua Tetingkap modal lapisan kedua akan menyekat tetingkap modal lapisan pertama, iaitu tetingkap modal lapisan kedua. Apabila dibuka, tetingkap modal lapisan pertama tidak boleh ditutup.

Bahagian pelaksanaan halaman khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0; } .modal { bottom: auto; padding: 0; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; overflow-y: auto; } .modal.container { max-width: none; } #firstmodal { width: 98%; height: 98%; } #secondmodal { width: 99%; height: 99%; } $(function() { $('#m1').on("click", function() { $('#firstmodal').modal(); }); $('#m2').on("click", function () { $('#secondmodal').modal(); }); }); 打开第一层模态窗口 × 第一层模态窗口 ' >Buka tetingkap modal lapisan kedua Lapisan pertama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Lapisan pertama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

关闭 × 第二层模态窗口 Lapisan kedua kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama Kandungan utama ... & Lt; jenis butang = "butang" data-dismiss = "modal" class = "btn btn-default" & gt; close & lt;/butang & gt;

Di atas adalah keseluruhan kandungan jQuery dan Bootstrap untuk melaksanakan tetingkap mod berbilang lapisan dan penyesuaian Ia sangat baik dan praktikal, dan boleh digunakan secara langsung dalam projek.

Menggunakan jQuery dan Bootstrap untuk melaksanakan pelbagai lapisan, mod suai windows_jquery

第一层模态窗口

第二层模态窗口

Artikel berkaitan