Foundation Modal

A modal is a popup that displays at the top of the page.

We can add a modal by using a unique ID on a container element (like <div id="myModal">) and adding the .reveal-modal class and data-reveal attribute. We can use the data-reveal-id=" attribute on any element to open the modal. The id must match the container id (example is "myModal").

If you want to close the modal by clicking outside of it, you can add the .close-reveal-modal class to the modal's close button <a> tag.

Note: Sliders require JavaScript, so you need to initialize Foundation JS:

Example

<!-- Trigger the Modal --><button 
    type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>
    <!-- The Modal Content -->&lt;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>

Modal Sizes

You can set the size of the modal by adding the following classes to the modal container:

• .tiny: 30% width
• .small: 40% width
• .medium: 60% width
• .large: 70% width
• .xlarge: 95% width
• .full: 100% width and height

Note: By default, on tablets, laptops, and PCs, it is 80% width, and on small screen devices, it is 100% width.

Example

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

Nested Modals

You can nest modals within a modal by adding a new trigger button on the first modal. You must set a unique id for the nested modal:

Example

<!-- Trigger the modal --><a href="#" class="button" data-reveal-id="myModal">Click 
    To Open Modal</a><!-- The First Modal -->&lt;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 -->&lt;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>

The second modal will replace the first modal. If you want to keep the first modal open when opening the second modal, you can add the data-options="multiple_opened:true;" attribute to the second modal:

Example

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