Beim Einbetten einer Bootstrap-Anwendung in einen Iframe werden modale Dialoge immer am oberen Rand des Iframes geöffnet, nicht am oberen Bildschirmrand. Gehen Sie zum Beispiel zu Ссылка und öffnen Sie ein Beispiel-Modal auf der Seite. Dann suchen Sie mit dem folgenden Beispielcode, der die gleiche Bootstrap-Seite in einem IFrame platziert, ein Modal und öffnen Sie es:
%Vor%Wie gehe ich vor, um das Modal auf dem Bildschirm in diesem Szenario zu positionieren?
UPDATE: Leider kann mein iFrame den Bildschirm nicht füllen, noch kann ich ihn korrigieren, da er sich in den Rest der Seite einfügen muss und die Seite selbst genug Inhalt zum Scrollen hat. Das ist nicht mein Design und ich habe vor, das Ganze zu überarbeiten, aber dafür muss ich jetzt arbeiten. Als temporäre Option benutze ich Javascript, um dem Iframe-Elternteil zu erklären, nach oben zu scrollen, wo das modale Dialogfenster erscheint. Obwohl dies akzeptabel ist, ist dies nicht das gewünschte Verhalten.
Ich benutze angularjs und die ui-bootstrap-Bibliothek in meinem Code, aber wie Sie oben sehen können, handelt es sich um ein Bootstrap-Problem.
Wenn Ihr iframe dieselbe document.domain wie das übergeordnete Fenster hat oder es ist eine Subdomain, Sie können den folgenden Code im iframe verwenden:
%Vor%show.bs.modal wird ausgelöst, nachdem Sie $ ('# myModal') aufgerufen haben. show () window.top.scrollY ruft die Position scrollY vom übergeordneten Fenster ab
Falls sich Ihre document.domain von der übergeordneten unterscheidet, können Sie sie hacken, indem Sie die onmousedown-Position im iframe erhalten. Zum Beispiel:
%Vor% Dies ist ein Bug in den meisten Browsern (IE scheint in Ordnung), wo die Elemente auf das iframe , nicht auf das Fenster, festgelegt sind. Wenn Sie etwas relativ zum Hauptdokument benötigen, muss es normalerweise im Hauptdokument sein.
Eine Problemumgehung besteht darin, Ihren iframe in ein festes Position-div zu schreiben, das die gesamte Breite des Bildschirms einnimmt und dann den iframe darin maximiert. Das scheint das Problem zu beheben
HTML :
%Vor%CSS :
%Vor%Siehe auch :
Tags und Links angularjs css iframe css-position twitter-bootstrap