2016-05-11 24 views
3

In Bootstrap 3 habe ich eine modale Form (nennen wir es das übergeordnete Modal). Es wird wie folgt aufgerufen:Bootstrap modal scrollt nicht nach Kind Modal geschlossen

$('#childmodal').modal({backdrop: "static", keyboard: "false"});

Die Eltern ist größer als meine Ansicht Hafen und es tut blättern, aber nach dem Kind modal:

<a href="#" data-toggle="modal" data-target="#receiptmodal" data-backdrop="static" data-keyboard="false"> <i class="fa fa-usd"></i> <strong>Receive Money</strong> </a>

Es Kind Modalverben wie folgt aufgerufen hat ist geschlossen, das übergeordnete Element wird nicht geblättert - stattdessen wird die Seite mit dem übergeordneten modalen Bildlauf zwar ausgegraut und deaktiviert.

Das Kind Modal ist wie folgt geschlossen: $("#childmodal").modal('hide');. Ich habe auch toggle ohne Glück versucht.

Warum passiert das? Ich brauche das Parent-Modal, um zu scrollen, wie es vor dem Öffnen und Schließen von Child-Modals tut.

Vielen Dank!

Antwort

1

Dies ist, weil das DOM nach dem modalen geschlossen, der Körper noch diese Klasse angewendet hatte: ".modal-open".

Das Entfernen dieser Klasse würde die Seite wieder auf normale Bedingungen bringen, die Bildlaufleiste und so weiter. Also müssen Sie:

+0

Vielen Dank für diesen Einblick. Damit habe ich gesehen, dass das Schließen des Kind-Modals diese Klasse entfernt hat, so dass das Zurücksetzen meine Elternrolle wieder gemacht hat !! Also habe ich gerade $ ('body') hinzugefügt. AddClass ('modal-open'); nach dem Schließen der Kinder. – Warren

+0

Großartig, ich hatte schon vorher ein ähnliches Problem. – joashp

1

Obwohl Joashp mir geholfen hat, die Antwort zu finden, wollte ich eine Antwort für die Vollständigkeit zu posten.

Joashp ist korrekt über die Klasse im Körper und meine Tests zeigten, dass das Hinzufügen der Klasse dem übergeordneten Modal ermöglicht, erneut zu scrollen. Das Problem ist, dass es in der realen Welt nicht funktioniert hat. Um das Problem vollständig zu beheben, füge ich hinzu, um die -Klasse dem Körper hinzuzufügen, nachdem jQuery das Modal vollständig ausgeblendet hat. Um das zu tun, musste ich den Callback für das Modal verwenden. "Versteckt" wird ausgelöst, wenn jQuery endlich fertig versteckt ist:

$('#childmodal').on('hidden.bs.modal', function() { $('body').addClass('modal-open'); });

2

Die wahre Antwort ist in dem Timing. Nachdem ich ein paar Stunden damit verbracht habe, durch das, was mit den Klassen passiert ist, zu schauen, habe ich Folgendes versucht und es funktioniert einfach so, wie es sollte. Im Grunde müssen Sie warten, bis sich das ursprüngliche Modal vollständig ausgeblendet hat, BEVOR Sie versuchen, das zweite Modal zu öffnen. So was.

$("#idmodal1").modal("hide"); 
/*When the modal is COMPLETELY hidden */ 
$("#idmodal1").on('hidden.bs.modal', function() { 
         $("#idmodal2").modal("show");/*Show the second modal*/ 
        }); 

Das zweite Modal scrollt jetzt wie normal.