기초 모달 상자
모달 상자는 페이지 상단에 표시되는 팝업 창입니다.
컨테이너 요소(예: <div id="myModal")에 고유 ID를 사용하고 .reveal-modal 클래스와 를 추가할 수 있습니다. data-reveal 속성을 사용하여 모달 상자를 추가합니다. 모든 요소에 data-reveal-id="id" 속성을 사용하여 모달 상자를 열 수 있습니다. id는 컨테이너 ID와 일치해야 합니다(예: "myModal"). <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。
如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。
注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:
实例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">
<div style="padding:20px;">
<h2>模态框</h2>
<p>模态框是一个显示在页面头部的弹窗。</p>
<button type="button" class="button" data-reveal-id="myModal">点我打开模态框</button>
<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>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
模态框大小
可以在模态框容器上添加以下类来设置模态框的大小：
.tiny: 30% 宽度.small: 40% 宽度.medium: 60% 宽度.large: 70% 宽度.xlarge: 95% 宽度.full: 100% 宽度和高度
注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。
实例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>模态框大小</h2>
<p>使用以下类来修改模态框大小:</p>
<ul>
<li><code>.tiny</code>: 设置宽度为 30%</li>
<li><code>.small</code>: 设置宽度为 40%</li>
<li><code>.medium</code>: 设置宽度为 60%</li>
<li><code>.large</code>: 设置宽度为 70%</li>
<li><code>.xlarge</code>: 设置宽度为 95%</li>
<li><code>.full</code>: 设置宽度喝高度为 100%</li>
</ul>
<button type="button" class="button" data-reveal-id="myModal">打开小个模态框</button>
<div id="myModal" class="reveal-modal tiny" data-reveal>
<h2>小个模态框</h2>
<p>这是一个小个模态框。尝试使用不同的类来修改模态框大小。</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
内嵌模态框
你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：
实例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>内嵌模态框</h2>
<!-- 触发模态框 -->
<button type="button" class="button" data-reveal-id="myModal">点击打开模态框</button>
<!-- 第一个模态框 -->
<div id="myModal" class="reveal-modal" data-reveal>
<h2>第一个模态框</h2>
<p>点击以下按钮会打开一个新的模态框。如果打开新的模态框，那么第一个模态框就会被关闭。</p>
<p><a href="#" data-reveal-id="secondModal" class="button success">打开第二个模态框</a></p>
<a class="close-reveal-modal">×</a>
</div>
<!-- 第二个模态框 -->
<div id="secondModal" class="reveal-modal" data-reveal>
<h2>第二个模态框</h2>
<p>第二个模态框，第一个模态框已关闭。</p>
<p>Foundation 让新的模态框取代了第一个模态框。</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;"
<a> 태그에 .close-reveal-modal 클래스를 추가할 수 있습니다. 🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜모달 상자 크기🎜🎜모달에 추가할 수 있습니다. 상자 컨테이너 다음 클래스는 모달 상자의 크기를 설정하는 데 사용됩니다: 🎜- 🎜
.tiny: 30% 너비🎜 - 🎜< code>.small: 40% 너비🎜
- 🎜
.medium: 60% 너비🎜 - 🎜< code>.large
코드>: 70% 너비🎜- 🎜
.xlarge: 95% 너비🎜 - 🎜
.full : 100% 너비 및 높이🎜
🎜참고: 기본값은 태블릿, 노트북, PC에서는 너비가 80%이고 작은 화면에서는 너비가 100%입니다. 장치. 🎜🎜🎜Example🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜🎜
임베디드 모달 상자🎜🎜모달 상자에 모달을 삽입할 수 있습니다 상자의 첫 번째 모달 상자에 새 트리거 버튼을 추가할 수 있습니다. 인라인 모달에 대한 고유 ID를 설정해야 합니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜두 번째 모달이 첫 번째 A 모달을 대체합니다. 상자. 첫 번째 모달을 닫지 않고 두 번째 모달을 열려는 경우. 두 번째 모달 상자에 data-options="multiple_opened:true;" 속성을 추가할 수 있습니다: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜"Run Instance" 버튼을 클릭하세요. 온라인 예시 보기 🎜🎜
.tiny: 30% 너비🎜.medium: 60% 너비🎜.xlarge: 95% 너비🎜.full : 100% 너비 및 높이🎜data-options="multiple_opened:true;" 속성을 추가할 수 있습니다: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜"Run Instance" 버튼을 클릭하세요. 온라인 예시 보기 🎜🎜
