Ausführliche Erläuterung der Bootstrap-Modalbox-Verschachtelung und der Tabindex-Attribute

In diesem Artikel werden hauptsächlich die Verschachtelung von Bootstrap-Modalboxen, Tabindex-Attribute und die Schattenentfernung vorgestellt. Ich hoffe, dass er allen helfen kann.

Verschachtelung von Modalboxen

Während der Entwicklung stieß ich auf die Notwendigkeit, die erste Modalbox durch ein Klickereignis auszulösen. Nach dem Auslösen wurde die zweite Modalbox durch das Ereignis aufgerufen Ausgelöst wird das dritte Modalfeld; das heißt, das Modalfeld wird verschachtelt.

Für die Verschachtelung modaler Boxen ist eine modale Box erforderlich, um die betroffene verschachtelte modale Box zu umschließen, sodass die modale Box beim Klicken nicht durcheinander gebracht wird.

Der HTML-Code lautet wie folgt:

<!--最外层包裹的模态框-->
<p class="modal fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
　　<!--第一个模态框--> 
　　<p class="modal-dialog modalWith firstModal" id="productModal" role="document"></p> 
　　<!--第二个模态框--> 
　　<p class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></p> 
　　<!--第三个模态框--> 
　　<p class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></p> 
</p>

tabindex

Die Erklärung des Tabindex-Attributs im Modalfeld w3c lautet: Das Tabindex-Attribut gibt die Tabulatortastensteuerung an Reihenfolge des Elements (bei Verwendung der Tabulatortaste zur Navigation). Das tabindex-Attribut ist in fast allen Browsern außer Safari verfügbar.

Wenn das Attribut im verschachtelten modalen Feld vorhanden ist, funktioniert die Eingabetaste (Esc) auf der Tastatur unabhängig vom Wert. Wenn es nicht vorhanden ist, funktioniert die Eingabetaste (Esc) nicht arbeiten.

Entfernen Sie den Schatten, der mit der Modalbox geliefert wird.

Wenn die Modalbox ausgelöst wird, wird eine Schattenebene generiert, die die gesamte Seite bedeckt.

Die Schattenebene wird von einer Klasse namens .modal-backdrop gesteuert. Der Stil von

.modal-backdrop im Bootsrap-Quellcode ist wie folgt:

.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;}

Wenn Sie die Schattenebene entfernen müssen, können Sie den CSS-Stil dafür festlegen

 .modal-backdrop {
 filter: alpha(opacity=0)!important;
 opacity: 0!important;
}

oder verwenden Sie js Control

 $(".modal-backdrop").remove();

Verwandte Empfehlungen:

So lösen Sie das Problem, dass die BootStrap-Modalbox nicht vertikal zentriert ist

AJAX- und SpringMVC-Implementierung Detaillierte Erläuterung der Paging-Abfragefunktion der Bootstrap-Modalbox

Das Problem, dass die Eingabe beim Öffnen nicht fokussiert werden kann, wird perfekt gelöst Die Modalbox „BootStrap“ und „select2“ werden zusammen verwendet

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Bootstrap-Modalbox-Verschachtelung und der Tabindex-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!