Ich habe eine Weile gesucht, aber ich kann keine Lösung dafür finden. Ich möchte folgendes:
- Öffnen Sie eine URL in einem Bootstrap-Modal. Ich habe diese Arbeit natürlich. Der Inhalt wird also dynamisch geladen.
- Wenn ein Benutzer eine Schaltfläche in diesem Modal drückt, soll das aktuelle Modal ausgeblendet werden, und unmittelbar danach soll ein neues Modal mit der neuen URL (auf die der Benutzer geklickt hat) geöffnet werden. Dieser Inhalt des 2. Modals wird ebenfalls dynamisch geladen.
- Wenn der Benutzer dann das 2. Modal schließt, muss das erste Modal wieder zurückkehren.
Ich habe tagelang darauf gestarrt, hoffe jemand kann mir helfen.
Danke im Voraus.
javascript
jquery
twitter-bootstrap
Eelco Luurtsema
quelle
quelle
Antworten:
Ohne einen bestimmten Code zu sehen, ist es schwierig, Ihnen eine genaue Antwort zu geben. In den Bootstrap-Dokumenten können Sie das Modal jedoch folgendermaßen ausblenden:
Zeigen Sie dann ein anderes Modal, sobald es ausgeblendet ist:
Sie müssen einen Weg finden, um die URL in das neue modale Fenster zu verschieben, aber ich würde annehmen, dass dies trivial wäre. Ohne den Code zu sehen, ist es schwierig, ein Beispiel dafür zu geben.
quelle
Ich weiß, dass dies eine späte Antwort ist, aber es könnte nützlich sein. Hier ist ein richtiger und sauberer Weg, um dies zu erreichen, wie oben bei @ karima erwähnt. Sie können tatsächlich zwei Funktionen gleichzeitig auslösen.
trigger
unddismiss
das Modal.HTML Markup;
Demo
quelle
templateUrl
undwindowClass
?data-dismiss="modal"
Button verpasst habe-webkit-backface-visibility: hidden;
auf HTML, Körper CSSEs ist nicht genau die Antwort, aber es ist nützlich, wenn Sie das aktuelle Modal schließen und ein neues Modal öffnen möchten.
Im HTML-Code auf derselben Schaltfläche können Sie das aktuelle Modal mit Datenentlassung schließen und ein neues Modal direkt mit Datenziel öffnen:
quelle
data-dismiss="modal"
ist, dass Ihr Inhalt nach links verschoben wird, wenn Sie das zweite Modal schließen.Das Problem dabei
data-dismiss="modal"
ist, dass Ihr Inhalt nach links verschoben wirdIch bin zu teilen , was für mich gearbeitet, war Problem statment Öffnung
pop1
vonpop2
JS CODE
quelle
Ich benutze diese Methode:
quelle
Mit dem folgenden Code können Sie das erste Modal ausblenden und das zweite Modal sofort öffnen. Mit derselben Strategie können Sie das zweite Modal ausblenden und das erste anzeigen.
quelle
Sie müssen dem Link oder der Schaltfläche, über die Sie diese Funktionalität hinzufügen möchten, folgendes Attribut hinzufügen:
Ein detaillierter Blog: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/
quelle
Es wird verwendet, um das vorhandene geöffnete Modell zu schließen. Sie können es auf das neue Modell einstellen
quelle
Mit BootStrap 3 können Sie Folgendes versuchen:
Getestet für die Arbeit mit: http://getbootstrap.com/javascript/#modals (klicken Sie zuerst auf "Demo Modal starten").
quelle
.attr
bisschen brauchst, oder? Würde das nicht genauso gut funktionieren?var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }
.Ich habe genau das gleiche Problem und meine Lösung ist nur, wenn der modale Dialog das Attribut [role = "dialog"] hat:
quelle
Ich hatte das gleiche Problem wie @Gravity Grave, bei dem das Scrollen bei Verwendung nicht funktioniert
in Verbindung mit
Der Bildlauf funktioniert nicht richtig und kehrt zum Scrollen der Seite und nicht des Modals zurück. Dies ist darauf zurückzuführen, dass beim Entfernen der Daten die modal-open-Klasse aus dem Tag entfernt wurde.
Am Ende bestand meine Lösung darin, das HTML der inneren Komponente auf das Modal zu setzen und den Text mit CSS ein- und auszublenden.
quelle
Wie oben erwähnt Im HTML-Code auf derselben Schaltfläche können Sie das aktuelle Modal mit Datenentlassung schließen und ein neues Modal direkt mit Datenziel öffnen:
<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>
Dies führt jedoch dazu, dass die Bildlaufleiste verschwindet und Sie feststellen, dass das zweite Modal länger war als das erste
Die Lösung besteht also darin, dem modalen Inline-Stil den folgenden Stil hinzuzufügen:
Style = "overflow-y : scroll ; "
quelle
Klickfunktion verwenden:
Kopf hoch:
Stellen Sie sicher, dass das, das Sie anzeigen möchten, ein unabhängiges Modal ist.
quelle
Im ersten Modal:
Ersetzen Sie den modalen Entlassungslink in der Fußzeile durch den unten stehenden Link.
Im zweiten Modal:
Dann ersetzt das zweite Modal das obere Div durch das untere Div-Tag.
quelle
Hatte das gleiche Problem, das hier, falls jemand in der Zukunft stößt auf dieses Schreiben und hat Probleme mit mehreren Modalverben, die haben haben Scrollen als auch (ich bin mit Bootstrap 3.3.7)
Was ich getan habe, ist ein Knopf wie dieser in meinem ersten Modal:
Es wird das erste ausblenden und dann das zweite anzeigen, und im zweiten Modal hätte ich eine Schaltfläche zum Schließen, die so aussehen würde:
Dadurch wird das zweite Modal geschlossen und das erste geöffnet. Damit das Scrollen funktioniert, habe ich meiner CSS-Datei folgende Zeile hinzugefügt:
PS: Nur eine Randnotiz, Sie müssen diese Modalitäten separat haben, das Moll-Modal kann nicht im ersten verschachtelt werden, da Sie das erste ausblenden
Hier ist das vollständige Beispiel basierend auf dem modalen Bootstrap-Beispiel:
quelle
quelle
Ich benutze einen anderen Weg:
quelle
Wenn Sie das zuvor geöffnete Modal schließen möchten, während Sie das neue Modal öffnen, müssen Sie dies über Javascript / jquery tun, indem Sie zuerst das aktuell geöffnete Modal schließen und dann eine Zeitüberschreitung von 400 ms angeben, damit es das neue Modal schließen und dann wie unten beschrieben öffnen kann ::
Wenn Sie versuchen, dies mit dem zu tun, tritt das
data-dismiss="modal"
Bildlaufproblem auf, wie von @gravity und @kuldeep in den Kommentaren erwähnt.quelle
Keine der Antworten hat mir geholfen, da ich etwas erreichen wollte, das genau dem entspricht, was in der Frage erwähnt wurde.
Ich habe zu diesem Zweck ein jQuery-Plugin erstellt.
Working Fiddle als Referenz, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/
Sie müssen nur mit meiner neuen API "
showStackedModal()
" anstatt nur "modal('show')
" aufrufen . Der Teil zum Ausblenden kann immer noch derselbe sein wie zuvor, und der gestapelte Ansatz zum Ein- und Ausblenden der Modalitäten wird automatisch berücksichtigt.quelle
Einfache und elegante Lösung für BootStrap 3.x. Das gleiche Modal kann auf diese Weise wiederverwendet werden.
quelle
Versuche dies
quelle
Wenn Sie mdb verwenden, verwenden Sie diesen Code
quelle
quelle
Ich bin vielleicht etwas spät dran, aber ich glaube, ich habe eine funktionierende Lösung gefunden.
Erforderlich -
jQuery
Alle Modalitäten mit einer Schaltfläche zum Schließen / Entlassen, deren Attribute wie folgt festgelegt sind:
Bitte beachten Sie die Klasse close_modal , die zu den Klassen der Schaltfläche hinzugefügt wurde
Um nun alle vorhandenen Modalitäten zu schließen, rufen wir an
Also, wo immer Sie ein Modal öffnen möchten
Fügen Sie einfach den obigen Code hinzu und alle offenen Modalitäten werden geschlossen.
Fügen Sie dann Ihren normalen Code hinzu, um das gewünschte Modal zu öffnen
quelle
Modales Dialogfeld ausblenden.
Methode 1: Verwenden von Bootstrap.
Methode 2: Verwenden
stopPropagation()
.Methode 3: Nach dem gezeigten Methodenaufruf.
Methode 4: Verwenden von CSS.
quelle
Dieser Code, Modal schließen geöffnet, öffnet das neue Modal, aber sofort wird neues Modal geschlossen.
Meine Lösung für das Öffnen neuer Modal nach dem Schließen anderer ist:
quelle
Kopieren Sie einfach diesen Code und fügen Sie ihn ein. Sie können mit zwei Modalen experimentieren. Das zweite Modal ist nach dem Schließen des ersten geöffnet:
Prost!
quelle