Foundation modal box
Modal box is displayed in a page header pop.
We can be on a container element (such as <div id="myModal" ) uses a unique ID, and add .reveal-modal classes and data-reveal attribute to add the modal box. We can use on any element of data-reveal-id=" id " " attribute Ali open modal box. id id must be consistent with the container (examples are "myModal").
If you want to click on the area outside the box to close the modal modal box. You can close button modal box <a> add labels .close-reveal-modal class.
Note: The slider requires JavaScript. So you need to initialize oundation JS:
Examples
<Button type = "button" class = "button" data-reveal-id = "myModal"> Click To Open Modal </ button>
<-! The Modal Content ->
<Div id = "myModal" class = "reveal-modal" data-reveal>
<H2> Heading in Modal. < / H2>
<P> Some text in the modal . </ P>
<P> Some text in the modal . </ P>
<A class = "close-reveal -modal"> & times; </ a>
</ Div>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
try it"
Modal box size
You can add the following classes on the modal box container to set the size of the modal box:
-
.tiny: 30% Width -
.small: 40% Width -
.medium: 60% Width -
.large: 70% Width -
.xlarge: 95% Width -
.full: 100% width and height
Note: The default on the tablet, notebook, PC computers is 80% of the width on the small screen is 100% width.
Examples
try it"
Embedded modal box
You can embed the modal box in modal box, you can add a new trigger button on the first modal box. You must set a unique id for the embedded modal box:
Examples
<A href = "#" class = "button" data-reveal-id = "myModal"> Click To Open Modal </ a>
<-! The First Modal ->
<Div id = "myModal" class = "reveal-modal" data-reveal>
<H2> First Modal </ h2 >
<P> Some text .. </ p>
<P> <a href = " #" data-reveal-id = "secondModal" class = "button"> Open Second Modal </ a> </ p>
<A class = "close-reveal -modal"> & times; </ a>
</ Div>
<-! The Second Modal ->
<Div id = "secondModal" class = "reveal-modal" data-reveal>
<H2> Tada! Second Modal < / h2>
<P> Some text .. </ p>
<A class = "close-reveal -modal"> & times; </ a>
</ Div>
try it"
The second modal box will replace the first modal box. If you want to open a second modal box without closing the first modal box. You can add on the second modal box data-options="multiple_opened:true;" ;" properties:
Examples
try it"