Kotak modal asas


Kotak modal ialah tetingkap timbul yang dipaparkan di kepala halaman.

Kita boleh menggunakan ID unik pada elemen bekas (seperti <div id="myModal") dan menambah atribut .reveal-modal dan data-reveal untuk menambah modal. Kita boleh membuka kotak modal menggunakan atribut data-reveal-id="id" pada mana-mana elemen. id mestilah konsisten dengan id bekas (contohnya ialah "myModal").

Jika anda ingin menutup kotak modal dengan mengklik di luar kotak modal. Anda boleh melakukan ini dengan menambahkan kelas <a> pada teg butang tutup kotak modal .close-reveal-modal.

Nota: Peluncur memerlukan JavaScript. Jadi anda perlu memulakan oundation JS:

Instance

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

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Saiz kotak modal

Anda boleh menambah kelas berikut pada bekas kotak modal untuk menetapkan saiz kotak modal:

  • .tiny: 30% lebar

  • .small: 40% lebar

  • .medium: 60% lebar

  • .large: 70% Lebar

  • .xlarge: 95% Lebar

  • .full: 100% Lebar dan ketinggian

Nota: lalai kepada 80% lebar pada tablet, komputer riba dan PC serta 100% lebar pada peranti skrin kecil.

Instance

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

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kotak modal terbenam

Anda boleh membenamkan kotak modal dalam kotak modal dan anda boleh menambah butang pencetus baharu pada kotak modal pertama. Anda mesti menetapkan id unik untuk modal sebaris:

Instance

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

Run Instance»

Klik "Run instance " butang untuk melihat contoh dalam talian

Kotak modal kedua akan menggantikan kotak modal pertama. Jika anda ingin membuka modal kedua tanpa menutup modal pertama. Anda boleh menambah atribut data-options="multiple_opened:true;" pada kotak modal kedua:

Instance

<!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" style="text-decoration:none;">打开第二个模态框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
    <h2>第二个模态框</h2>
    <p>第二个模态框，第一个模态在第二个模态框下面，并没有关闭。</p>
   
    <a class="close-reveal-modal">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian