Okno modalne Fundacja
Modalne okno jest wyświetlany w nagłówku strony pop.
Możemy być na elemencie pojemnika (takiego jak <div id="myModal" ) wykorzystuje unikalny identyfikator, a następnie dodaj .reveal-modal klas i data-reveal atrybut dodać okno modalne. Możemy użyć na dowolnym elemencie data-reveal-id=" id " " atrybut Ali polu Otwórz modalne. id id musi być zgodna z pojemnika (przykłady "myModal").
Jeśli chcesz, aby kliknąć na obszarze poza pole, aby zamknąć okno modalne modalnego. Można zamknąć okno modalne przycisk <a> dodać etykiety .close-reveal-modal klasy.
Uwaga: Suwak wymaga JavaScript. Więc trzeba zainicjować OUNDATION JS:
Przykłady
<Button type = "button" class = "button" danych ujawniają-id = "myModal"> Kliknij, aby otworzyć modalnych </ button>
<! - Modalna Content ->
<Div id = class "myModal" = "ujawniają-modal" ujawnienia danych>
<H2> Dział w modalne. < / H2>
<P> jakiś tekst w modalnego . </ P>
<P> jakiś tekst w modalnego . </ P>
Klasa <A = "close-reveal -modal"> & razy; </ a>
</ Div>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Modal box rozmiar
Możesz dodać następujące klasy na pojemniku polu modalne, aby ustawić rozmiar okna modalnego:
-
.tiny: 30% Szerokość -
.small: 40% Szerokość -
.medium: 60% Szerokość -
.large: 70% Szerokość -
.xlarge: 95% Szerokość -
.full: szerokość i wysokość 100%
Uwaga: Domyślnym na tablet, notebook, komputery PC wynosi 80% szerokości na małym ekranie jest 100% szerokości.
Przykłady
Spróbuj »
Wbudowany okno modalne
Można osadzić okno modalne w oknie modalnym, można dodać nowy przycisk wyzwalania na pierwszym polu modalnej. Musisz ustawić unikatowy identyfikator dla wbudowanego oknie modalnym:
Przykłady
<A Href = "#" class = "button" data-reveal-id = "myModal"> Kliknij, aby otworzyć modalnych </ a>
<! - Pierwszy Modal ->
<Div id = class "myModal" = "ujawniają-modal" ujawnienia danych>
<H2> Pierwszy Modal </ h2 >
<P> Jakiś tekst .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Otwórz drugie Modal </ a> </ p>
Klasa <A = "close-reveal -modal"> & razy; </ a>
</ Div>
<! - Druga Modal ->
<Div id = class "secondModal" = "ujawniają-modal" ujawnienia danych>
<H2> Tada! Druga Modal < / h2>
<P> Jakiś tekst .. </ p>
Klasa <A = "close-reveal -modal"> & razy; </ a>
</ Div>
Spróbuj »
Okno modalne sekund zastąpi pierwsze okno modalne. Jeśli chcesz otworzyć drugie okno modalne, nie zamykając pierwsze pole modalnego. Możesz dodać na drugim polu modalnej data-options="multiple_opened:true;" ;" właściwości:
Przykłady
Spróbuj »