Stiftung modale Box
Modal-Box ist in einem Seitenkopf Pop angezeigt.
Wir können auf ein Containerelement sein (wie <div id="myModal" ) verwendet eine eindeutige ID, und fügen Sie .reveal-modal - Klassen und data-reveal Attribut das modale Feld hinzuzufügen. Wir können auf ein beliebiges Element verwenden data-reveal-id=" id " " Attribut Ali offen modale Feld. id - ID mit dem Behälter übereinstimmen müssen (Beispiele sind "myModal").
Wenn Sie außerhalb der Box auf den Bereich klicken, um den Modal Modal Feld zu schließen. Sie können Schaltfläche modal Feld schließen <a> Etiketten hinzufügen .close-reveal-modal - Klasse.
Hinweis: Der Schieber benötigt JavaScript. So müssen Sie tiftung JS zu initialisieren:
Beispiele
<Taste type = "button" class = "button" Daten-enthüllen-id = "myModal"> Klicken Sie Modal So öffnen </ button>
<! - Der Modal Inhalt ->
<Div id = "myModal" class = "enthüllen-modal" Daten offenbaren>
<H2> Überschrift in Modal. < / H2>
<P> Ein Text im Modal . </ P>
<P> Ein Text im Modal . </ P>
<A Class = "close-reveal -modal"> & Zeiten; </ a>
</ Div>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Modal Kastengröße
Sie können die folgenden Klassen auf den Modal Box Container hinzufügen, die Größe des modalen Feld zu setzen:
-
.tiny: 30% Breite -
.small: 40% Breite -
.medium: 60% Breite -
.large: 70% Breite -
.xlarge: 95% Breite -
.full: 100% Breite und Höhe
Hinweis: Die Standardeinstellung auf dem Tablet, Notebook, PC - Computer ist 80% der Breite auf dem kleinen Bildschirm ist zu 100% Breite.
Beispiele
Versuchen »
Embedded modale Box
Sie können das modale Feld in modal Feld einbetten, können Sie einen neuen Trigger-Taste auf der ersten modalen Feld hinzufügen. Sie müssen eine eindeutige ID für den Embedded-modale Box-Set:
Beispiele
<A Href = "#" class = "button" data-reveal-id = "myModal"> Klicken Modal So öffnen </ a>
<! - The First Modal ->
<Div id = "myModal" class = "enthüllen-modal" Daten offenbaren>
<H2> Erste Modal </ h2 >
<P> Ein Text .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Öffnen Zweite Modal </ a> </ p>
<A Class = "close-reveal -modal"> & Zeiten; </ a>
</ Div>
<! - The Second Modal ->
<Div id = "secondModal" class = "enthüllen-modal" Daten offenbaren>
<H2> Tada! Zweite Modal < / h2>
<P> Ein Text .. </ p>
<A Class = "close-reveal -modal"> & Zeiten; </ a>
</ Div>
Versuchen »
Die zweite modale Feld wird die erste modale Box ersetzen. Wenn Sie eine zweite modale Box zu öffnen, ohne das erste modale Feld zu schließen. Sie können auf dem zweiten modalen Feld hinzufügen data-options="multiple_opened:true;" ;" Eigenschaften:
Beispiele
Versuchen »