Foundation modal box


May 04, 2021 13:00 Foundation5


Table of contents


Foundation modal box

The modal box is a marble window that appears at the head of the page.

We can use a unique ID on a container element (e.g., <div id="myModal" and .reveal-modal and data-reveal to add modal boxes. W e can open the data-reveal-id=" id " attribute Ali. The id must be consistent with the container id (instance "myModal").

If you want to close the modal box by clicking on an area other than the modal box. You can do this by adding the <a> class to .close-reveal-modal and the label.

Note: The slider requires JavaScript. So you need to initialize the development JS:

Instance

<!-- Trigger the Modal -->
< 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 out . . .

Modal box size

The following classes can be added to 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 is 80% width on tablets, notebooks, and PCs, and 100% width on small-screen devices.

Instance

< div id= "myModal" class= "reveal-modal tiny|small|medium|large|xlarge|full" data-reveal >

Try it out . . .

Inline modal boxes

You can embed modal boxes in modal boxes, and you can add new trigger buttons to the first modal box. You must set a unique id for the embedded modal box:

Instance

<!-- Trigger the modal -->
< 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 out . . .

The second modal box replaces the first modal box. I f you want to open the second modal box, do not close the first modal box. Y ou can add data-options="multiple_opened:true;"

Instance

< div id= "secondModal" class= "reveal-modal" data-reveal data-options= "multiple_opened:true;" >

Try it out . . .