Ich habe eine Reihe von modalen Bootstrap-Fenstern auf einer Site, an der ich gerade arbeite, die Remote-Inhalte laden. Das funktioniert perfekt. Mein Chef hat mir jedoch mitgeteilt, dass die Links innerhalb dieser Modals nicht auf eine neue Seite gehen können, sondern dass sie im modalen Fenster neu geladen werden müssen.
Ich habe ein paar Dinge ohne Glück versucht.
Zuerst habe ich die modale Verbindung innerhalb des modalen
%Vor%Dieser Link funktioniert nicht, Bootstrap.js löst diesen Fehler aus.
%Vor%Also habe ich versucht, die ID in ein anderes modales Fenster zu ändern, das ich auf der Seite habe, und es erscheint hinter dem modalen Fenster, das bereits dort ist. Was ich nicht brauche, ist vielversprechend.
Gibt es einen Weg darum, damit der Inhalt im selben modalen Fenster geladen werden kann?
Wie von @Chevi vorgeschlagen, wird die beste Option darin bestehen, einen IFrame innerhalb des Modales zu platzieren. Sie müssen Ihr vorhandenes Seiten- / Modallayout nicht ändern, da Sie bei jedem Klick ein neues iframe einfügen können.
Wenn Sie ein Bootstrap-Modal mit einem Link in .modal-body haben, benötigen Sie etwas wie folgt:
Dies packt den href des angeklickten Links, ersetzt den .modal-body Inhalt durch einen iframe und setzt den src des iframes auf den href des Links.
Beachten Sie, dass das Link-Ziel framefähig sein muss: Kein framekillers, keine X-Frame-Optionen (daher funktioniert die Verknüpfung mit google auf diese Weise nicht!)
Geige: Ссылка
Onclick Javascript Funktion
aufrufen %Vor%Rufen Sie die JavaScript-Funktion auf, um Daten mit der Ajax-Anfrage zu laden:
%Vor% Ich nehme an Sie haben jQuery für Sie verfügbar, und alle Links in den Modalen sind Standard-Anchor-Tags ( <a href="...">Link</a> )
Ich nehme auch die Modalstruktur an, die hier definiert ist: Ссылка
Die einfachste Möglichkeit besteht darin, Delegaten für die Verknüpfungen zu konfigurieren, den Standard zu verhindern und den Inhalt im modalen body-Element zu laden. Dies erfordert die wenigsten Modifikationen am Modal-Inhalt, vermeidet es, den Inhalt in Iframes zu isolieren (daher das Styling zu unterbrechen) und ist im Allgemeinen eine ziemlich saubere Lösung:
%Vor%Das oben Genannte muss nur einmal ausgeführt werden, auf der Seite bereit, und dies wird alle bestehenden und zukünftigen Modalitäten behandeln. Ein Nachteil ist, dass wenn die Links zu einem Anker anstatt zu einer neuen Seite gehen, dies nicht funktioniert (d. H.% Co_de%), aber in den meisten Fällen wird es gut funktionieren.
Dies ist die Lösung, die ich angenommen habe. Es funktioniert mit:
Hauptseite HTML:
%Vor%Modale Seite # 1 HTML:
%Vor%Modale Seite # 2 HTML:
%Vor%Bootstrap 3 Modal vertikal zentriert (siehe hier Ссылка ):
%Vor%Javascript:
%Vor%Hier Ссылка können Sie ein funktionierendes Beispiel sehen, indem Sie auf "Datenschutzrichtlinie" und "Cookie-Richtlinie" unten auf der Seite klicken.
Kopieren Sie einfach den unten angegebenen Code. Sie können die Site, zu der es umgeleitet wird, auch ändern, indem Sie die Verknüpfung in Objekt und Tag einbetten ändern. Dies kann auch mithilfe von iframe anstelle von embed geschehen. Posten Sie, wenn Sie weitere Zweifel daran haben
%Vor%Sie müssen bootstrap-modal.js und bootstraps jquery.js Datei enthalten. was du von getbootstrap.com bekommen kannst
Tags und Links jquery twitter-bootstrap