2017-03-09 8 views
1

Ich versuche, eine einfache Modal von Angular Bootstrap (https://ng-bootstrap.github.io/#/components/modal)Winkel Bootstrap-modal-Show wird nicht ausgelöst

jedoch zu implementieren, wenn ich auf die Schaltfläche im Beispiel klicken (lokal implementiert) das ngb-modal-window Element Übergang nicht zu Opazität 1. Aber wie Sie sehen können ist es, die richtigen Klassen enthält (Fade-Show):

Code:

<ngb-modal-window role="dialog" style="display: block;" tabindex="-1" ng-reflect-class-name="modal fade show" class="modal fade show"> 

Diese fehlenden CSS-Ergebnisse auf demselben Element:

.fade.show { 
    opacity: 1; 
} 

Dieser Teil aus unbekanntem Grund in meiner Umsetzung fehlt, während es in den Plunker/demosites zeigt.

Ich habe versucht, manuell diese CSS meine Komponenten auf zwei Arten hinzufügen:

.fade.show { 
    opacity: 1; 
} 

ngb-modal-window.modal.fade.show { 
    opacity: 1; 
} 

Beide nicht funktionierte.

Was könnte der Grund sein? Fehle ich etwas Triviales?

Weitere Informationen:

  • <template ngbModalContainer></template> war im Preis enthalten
  • NgbModal wird in der Komponente
  • Bootstrap-Version 4.0.0-alpha.5
+0

Ich sehe keinen Übergang in Ihrem CSS –

+0

normalerweise sollten die Animationen Teil des Bootstrap selbst sein. Der erwähnte Übergang sollte Teil von https://maxcdn.bootstrapcdn.com/bootstrap/scss/_transitions.scss sein. Irgendwie wird das Element nicht geladen/hinzugefügt. So würde ich normalerweise eine leere CSS-Datei haben und nicht manuell Übergänge eingeben. Wenn das ist, was Sie über – Wandang

+0

https://github.com/ng-bootstrap/ng-bootstrap/issues/1293 fragen, war dies ein Bootstrap-CSS-Update-Problem. – Wandang

Antwort