Verwenden von jQuery und Bootstrap zur Implementierung einer mehrschichtigen, adaptiven modalen Windows

Dieser Artikel praktiziert ein mehrschichtiges modales Fenster und ist adaptiv.

Klicken Sie auf eine Schaltfläche auf der Seite, um die erste Ebene des adaptiven modalen Fensters aufzurufen.

Enthält eine Schaltfläche im modalen Fenster der ersten Ebene. Klicken Sie auf die Schaltfläche, um das modale Fenster der zweiten Ebene zu öffnen. Wenn es geöffnet ist, kann das modale Fenster der ersten Ebene nicht geschlossen werden.

Der spezifische Teil der Seitenimplementierung lautet wie folgt:

Code kopieren Der Code lautet wie folgt: .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(); }); }); 打开第一层模态窗口 × 第一层模态窗口 & Lt; button class = "btn btn-primary btn-lg" id = "m2" & gt; öffnen Sie das zweite Schicht-Modalfenster & lt;/button & gt; Die erste Ebene des Hauptinhalts Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Die erste Ebene des Hauptinhalts Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

关闭 × 第二层模态窗口 Die zweite Ebene des Hauptinhalts Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Hauptinhalt Schließen

Das Obige ist der gesamte Inhalt von jQuery und Bootstrap zur Implementierung mehrschichtiger und adaptiver modaler Fenster. Es ist sehr gut und praktisch und kann direkt in Projekten verwendet werden.

Verwenden von jQuery und Bootstrap zur Implementierung einer mehrschichtigen, adaptiven modalen Windows_JQuery

第一层模态窗口

第二层模态窗口