Foundation Modal
A modal is a popup that appears at the top of the page.
We can, on a container element (such as<div id="myModal") use a unique ID, and add.reveal-modalclass anddata-revealUse the attribute to add a modal. We can use it on any element.data-reveal-id="id"an attribute to open the modal.idIt must match the container ID (for example, "myModal").
If you want to close the modal by clicking the area outside it, you can use the modal's close button.<a>Add to the tag.close-reveal-modalclass to implement.
Note:The slider requires JavaScript. So you need to initialize Foundation JS:
Example
<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">×</a>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Try it Yourself »
Modal size
You can add the following classes to the modal container to set the modal's size:
.tiny: 30% width.small: 40% width.medium: 60% width.large: 70% width.xlarge: 95% width.full: 100% width and height
Note:The default width is 80% on tablets, laptops, and PCs, and 100% width on small-screen devices.
Example
Try it Yourself »
Embedded Modal
You can embed a modal inside a modal, and add a new trigger button to the first modal. You must set a unique id for the embedded modal:
Example
<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">×</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">×</a>
</div>
Try it Yourself »
The second modal will replace the first modal. If you want the first modal not to close when the second modal is opened, you can add it to the second modal.data-options="multiple_opened:true;"Attributes:
Example
Try it Yourself »