2014-05-06 4 views
5

Ich benutze Foundation neueste Version Foundation 5, ich möchte Reveal Popup in meinem Projekt verwenden, habe ich versucht, mit folgendem Code und .js Dateien zu implementieren.Wie man Foundation 5 Reveal Popup reagieren lässt?

Es funktioniert gut in großen Displays wie Laptop und Tablets, aber wenn ich versuche, meine Seite in kleinen Geräten wie Handy zu öffnen, dann wird es nicht richtig angezeigt, muss ich rechts und links in meinem Handy-Bildschirm reisen, um gesamte Popup zu sehen.

  • inklusive CSS

    <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" /> <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

  • HTML-Teil

HTML Part

Included Script

Bitte helfen Sie mir oder schlagen Sie mir vor, wenn ich etwas in obigem Code verpasst habe.

  • Bild 2 image2

Antwort

4

Nutzung der Stiftung in gebauten Gitter Klassen large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal> 
    <h2>Popup title.</h2> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Und Sie haben diese Linie von CSS zu entfernen:

.reveal-modal { 
    width: 100vw; //remove this line from your css 
} 
+0

NO es noch gleiche ist .... – prog1011

+0

aktualisiert Antwort, entfernen Sie diese Zeile – Aditya

+0

Danke .... es funktioniert. Wir müssen nur die Standardbreite entfernen. @ Aditya – prog1011

0

Bearbeiten Sie in _reveal.scss den Abschnitt @media #{$small-only}.

fügen Sie die Zeile width: 90vw;

Es sollte so aussehen, wenn Sie fertig sind:

@media #{$small-only} { 
    min-height:100vh; 
    width: 90vw; 
} 

Sie können auch die Linie min-height:100vh; entfernen, wenn Sie den Bildschirm auf mobilen füllen vertikal nicht die modale wollen Geräte.

Diese Lösung erfordert keine Verwendung von Rasterspalten.

0

Die anderen Antworten werden funktionieren, irgendwie. Dies liegt daran, dass die Foundation keine Box-Sizing-Funktion mehr anwendet: die Rahmenbox für alle Elemente auf der ganzen Linie. Es ist das Hinzufügen der Polsterung zu der gesamten Laibung 100% Breite, die es außerhalb des Körpers schiebt.

.reveal-modal { 
    box-sizing:border-box; 
    min-height:0 /* If you want to remove the full viewport height effect */ 
} 
Verwandte Themen