boîte modale Fondation
case Modal est affiché dans une page en-tête pop.
Nous pouvons être sur un élément conteneur (comme <div id="myModal" - .reveal-modal data-reveal <div id="myModal" ) utilise un identifiant unique, et ajoutez .reveal-modal classes et data-reveal attribut pour ajouter la boîte modale. Nous pouvons utiliser sur tout élément de data-reveal-id=" id " " Ali boîte modale ouverte d'attribut. id id doit être compatible avec le récipient (exemples sont "myModal").
Si vous voulez cliquer sur la zone en dehors de la boîte pour fermer la boîte modale modale. Vous pouvez fermer la boîte modale bouton <a> ajouter des étiquettes .close-reveal-modal classe.
Remarque: Le curseur nécessite JavaScript. Donc, vous devez initialiser fondationcanadiennede JS:
Exemples
<Type Bouton = classe "bouton" = "button" données révèle-id = "myModal"> Cliquez ici pour ouvrir Modal </ button>
<! - Le contenu Modal ->
<Div id = classe "myModal" = "révéler modale" données révèlent>
<H2> Rubrique Modal. < / H2>
<P> Du texte dans le modal . </ P>
<P> Du texte dans le modal . </ P>
class = <A "close-reveal -modal"> & times; </ a>
</ Div>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Modal taille de la boîte
Vous pouvez ajouter les classes suivantes sur le conteneur de la boîte modale pour définir la taille de la boîte modale:
-
.tiny: 30% Largeur -
.small: 40% Largeur -
.medium: 60% Largeur -
.large: 70% Largeur -
.xlarge: 95% Largeur - de
.full: 100% largeur et la hauteur
Note: La valeur par défaut sur la tablette, ordinateur portable, ordinateurs PC est de 80% de la largeur sur le petit écran est une largeur de 100%.
Exemples
Essayez »
boîte modale embarquée
Vous pouvez intégrer la boîte modale dans la boîte modale, vous pouvez ajouter un nouveau bouton de déclenchement sur la première boîte modale. Vous devez définir un identifiant unique pour la boîte modale embarquée:
Exemples
<A Href = "#" class = "button" data-reveal-id = "myModal"> Cliquez pour ouvrir Modal </ a>
<! - The First Modal ->
<Div id = classe "myModal" = "révéler modale" données révèlent>
<H2> First Modal </ h2 >
<P> Certains textes .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Ouvrir Second Modal </ a> </ p>
class = <A "close-reveal -modal"> & times; </ a>
</ Div>
<! - The Second Modal ->
<Div id = classe "secondModal" = "révéler modale" données révèlent>
<H2> Tada! Deuxième Modal < / h2>
<P> Certains textes .. </ p>
class = <A "close-reveal -modal"> & times; </ a>
</ Div>
Essayez »
La seconde boîte modale remplacera la première boîte modale. Si vous souhaitez ouvrir une deuxième boîte modale sans fermer la première boîte modale. Vous pouvez ajouter sur la seconde boîte modale data-options="multiple_opened:true;" ;" propriétés:
Exemples
Essayez »