The modal box is a pop-up window displayed at the head of the page.
We can use the container elements (such as
<div
id="myModal"
) use a unique ID and add
.reveal-modal
Class and
data-reveal
Property to add a modal box. We can use it on any element.
data-reveal-id="id"
The property Ali opens the mode box. id Must be consistent with the container id (instance is “myModal”).
If you want to close the modal box by clicking outside the modal box. You can click the close button in the mode box
<a>
Add to the label
.close-reveal-modal
Class to implement.
注意: The slider needs to use JavaScript. So you need to initialize Foundation JS: 尝试一下 » You can add the following classes to the modal box container to set the size of the modal box: 注意: It defaults to 80% width on tablets, laptops, PC computers and 100% width on small screen devices. 尝试一下 » You can embed a modal box in the modal box, and you can add a new trigger button to the first modal box. You must set a unique id for the embedded modal box: The second modal box replaces the first modal box. If you want to open the second modal box, do not close the first modal box. Can be added on the second modal box 8.28.1. Example ¶
<!-- 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">×</a>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Modal box size ¶
.tiny
: 30% width
.small
: 40% width
.medium
: 60% width
.large
: 70% width
.xlarge
95% width
.full
100% width and height 8.28.2. Example ¶
<div id="myModal" class="reveal-modal
tiny|small|medium|large|xlarge|full" data-reveal>
Embedded modal box ¶
8.28.3. Example ¶
<!-- 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">×</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>
data-options="multiple_opened:true;"
Attributes: 8.28.4. Example ¶
<div id="secondModal" class="reveal-modal" data-reveal
data-options="multiple_opened:true;">