AngularUI Modal - Verhindern von Body Shift und Scrollen

Ich benutze die neuesten Versionen von angularjs, angularui, jquery und bootstrap und bin auf ein Problem gestoßen. Der Körperinhalt verschiebt sich nach links und dann nach rechts, wenn ein angularui modal verwendet wird. Dies kann beispielsweise auf der angleui Homepage eingesehen werden.AngularUI Modal - Verhindern von Body Shift und Scrollen

Ich habe dieses Problem (https://github.com/twbs/bootstrap/issues/9855) durchgelesen und habe versucht, diese Lösung (http://jsbin.com/oHiPIJi/8/edit) auf den eckigui modalen Fall zu erweitern, aber es scheint nicht zu funktionieren. Mein Wissen über Jquery ist ziemlich begrenzt/minimal Ich habe Angst, aber ich vermute, dass die bs.modal Ereignisse nicht für angularui ausgelöst werden, obwohl ich mir nicht sicher bin.

Alle Hinweise auf die richtige Richtung, um dieses Problem zu lösen, würden sehr geschätzt werden! Vielen Dank.

Quelle

2014-01-27 Andrew

Folgendes kann hilfreich sein:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
<style> 
    .modal-open { 
    overflow: auto; 
} 
</style>

überschreiben Klasse modal offenen Überlauf automatisch nach dem Bootstrap CSS geladen wird. Hier können Sie überprüfen, ob dies das gewünschte Ergebnis ist: http://plnkr.co/edit/Jz6Pd08v7dkkdRUKg8FK?p=preview

Sie müssen die Vorschau in einem neuen Fenster öffnen (Blue X oben rechts). Ändern Sie die Größe des Fensters auf verschiedene Breiten, um zu sehen, ob es mit laufender Bildlaufleiste funktioniert oder nicht. Getestet auf Firefox. Andere Browser haben möglicherweise andere Ergebnisse.

Quelle

2014-01-27 11:15:16 mainguy

Vielen Dank für Ihre Antwort mainguy. Leider löst es das Problem nicht für mich. Ich habe den Plünderer gekontert, um zu demonstrieren (http://plnkr.co/edit/wZ7BSIIKBy850fR4Vxs0?p=preview). Es löst das Problem der Inhaltsverlagerung, führt aber einen Bildlauf des Hintergrunds ein (sobald Sie zum unteren Ende des Modales blättern). Das ist, was ich gefunden habe, als ich versuchte, dies durchzuarbeiten - Sie können entweder den Inhalt loswerden, der sich mit CSS wie dem oben beschriebenen bewegt, aber einen Hintergrund scrollend oder den Hintergrund vom Scrollen stoppen und Inhalte verschieben lassen. Sicher kannst du beides lösen - wahrscheinlich mit JS. – Andrew

Was ist so schlimm an einem scrollbaren Hintergrund? Vielleicht solltest du ng-dialog ausprobieren. Ich benutze es sehr oft und es ist viel kleiner und einfacher zu handhaben als Bootstrap Modal. Funktioniert perfekt mit Bootstrap 3. https://github.com/likeastore/ngDialog – mainguy

Danke - Ich werde ng-dialog einen Versuch geben. Das Problem mit einem scrollbaren Hintergrund für mich ist, dass es ziemlich beunruhigend für den Benutzer ist, bis zum Ende eines Modales zu scrollen und dann den Hintergrund zu scrollen, d.h. das Verhalten ist unerwartet. – Andrew

AngularUI Modal - Verhindern von Body Shift und Scrollen

Antwort

Verwandte Themen