Bootstrap-Modalbox-Verschachtelung, Tabindex-Attribut, Methode zum Entfernen von Schatten

Verschachtelung von Modalboxen

Während der Entwicklung stieß ich auf die Notwendigkeit, die erste Modalbox durch ein Klickereignis auszulösen und dann die dritte Modalbox aufzurufen durch das Ereignis nach dem Auslösen, und das dritte Modalfeld durch Ereignisse auslösen;

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.

HTML-Code lautet wie folgt:

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

tabindex

Erklärung des Tabindex-Attributs w3c im Modalformat Feld Ja: Das tabindex-Attribut gibt die Tabulatortasten-Steuerungsreihenfolge des Elements an (wenn die Tabulatortaste zur Navigation verwendet wird). 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 überlagert wird die gesamte Seite generiert.

Die Schattenebene wird durch eine Klasse namens <🎜 dargestellt >.modal-backdrop Steuern Sie die Anzeige.

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

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

Sie können ihn verwenden, wenn Sie Sie müssen die Schattenebene entfernen. Legen Sie den CSS-Stil fest

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

oder steuern Sie ihn über js

Das obige ist der detaillierte Inhalt vonBootstrap-Modalbox-Verschachtelung, Tabindex-Attribut, Methode zum Entfernen von Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!