Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div)使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id=\"id\" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 \”myModal\”)。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化
Foundation JS:

实例

	<!-- 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>

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小：

  • .tiny: 30% 宽度
  • .small: 40% 宽度
  • .medium: 60% 宽度
  • .large: 70% 宽度
  • .xlarge: 95% 宽度
  • .full: 100% 宽度和高度

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

实例

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

内嵌模态框

你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

实例

	<!-- 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>

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options=\"multiple_opened:true;\" 属性：

实例

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