亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊 / Foundation 模態(tài)框

Foundation 模態(tài)框

模態(tài)框是一個顯示在頁面頭部的彈窗。

我們可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 類和 data-reveal 屬性來添加模態(tài)框。我們可以在任何元素上使用 data-reveal-id="id" 屬性阿里打開模態(tài)框。  id 必須與容器 id 一致(實例為 "myModal")。

如果你希望在點擊模態(tài)框之外的區(qū)域來關閉模態(tài)框。你可以在模態(tài)框的關閉按鈕  <a> 標簽上添加 .close-reveal-modal 類來實現(xiàn)。

注意: 滑塊需要使用 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>模態(tài)框</h2>
  <p>模態(tài)框是一個顯示在頁面頭部的彈窗。</p>
  <button type="button" class="button" data-reveal-id="myModal">點我打開模態(tài)框</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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

模態(tài)框大小

可以在模態(tài)框容器上添加以下類來設置模態(tài)框的大小：

  • .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>模態(tài)框大小</h2>
  <p>使用以下類來修改模態(tài)框大小:</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">打開小個模態(tài)框</button>
  
  <div id="myModal" class="reveal-modal tiny" data-reveal>
    <h2>小個模態(tài)框</h2>
    <p>這是一個小個模態(tài)框。嘗試使用不同的類來修改模態(tài)框大小。</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>

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

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

內(nèi)嵌模態(tài)框

你可以在模態(tài)框內(nèi)嵌入模態(tài)框，可以在第一個模態(tài)框上添加新的觸發(fā)按鈕。你必須為內(nèi)嵌模態(tài)框設置一個唯一的 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>內(nèi)嵌模態(tài)框</h2>
  <!-- 觸發(fā)模態(tài)框 -->
  <button type="button" class="button" data-reveal-id="myModal">點擊打開模態(tài)框</button>

  <!-- 第一個模態(tài)框 -->
  <div id="myModal" class="reveal-modal" data-reveal>
    <h2>第一個模態(tài)框</h2>
    <p>點擊以下按鈕會打開一個新的模態(tài)框。如果打開新的模態(tài)框，那么第一個模態(tài)框就會被關閉。</p>
    <p><a href="#" data-reveal-id="secondModal" class="button success">打開第二個模態(tài)框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二個模態(tài)框 -->
  <div id="secondModal" class="reveal-modal" data-reveal>
    <h2>第二個模態(tài)框</h2>
    <p>第二個模態(tài)框，第一個模態(tài)框已關閉。</p>
    <p>Foundation 讓新的模態(tài)框取代了第一個模態(tài)框。</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>

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

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

第二個模態(tài)框會取代第一個模態(tài)框。如果你希望在打開第二個模態(tài)框時，不關閉第一個模態(tài)框?？梢栽诘诙€模態(tài)框上添加 data-options="multiple_opened:true;" 屬性：

實例

<!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>內(nèi)嵌模態(tài)框</h2>
  <!-- 觸發(fā)模態(tài)框 -->
  <button type="button" class="button" data-reveal-id="myModal">點擊打開模態(tài)框</button>

  <!-- 第一個模態(tài)框 -->
  <div id="myModal" class="reveal-modal" data-reveal>
    <h2>第一個模態(tài)框</h2>
    <p>點擊以下按鈕會打開一個新的模態(tài)框。如果打開新的模態(tài)框，那么第一個模態(tài)框就會被關閉。</p>
    <p><a href="#" data-reveal-id="secondModal" class="button success" style="text-decoration:none;">打開第二個模態(tài)框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二個模態(tài)框 -->
  <div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
    <h2>第二個模態(tài)框</h2>
    <p>第二個模態(tài)框，第一個模態(tài)在第二個模態(tài)框下面，并沒有關閉。</p>
   
    <a class="close-reveal-modal">×</a>
  </div>
</div>

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

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例