Boîte modale de fondation


Une boîte modale est une fenêtre pop-up affichée en tête de page.

Nous pouvons utiliser un identifiant unique sur l'élément conteneur (comme <div id="myModal") et ajouter la classe .reveal-modal et l'attribut data-reveal pour ajouter le modal. Nous pouvons ouvrir une boîte modale en utilisant l'attribut data-reveal-id="id" sur n'importe quel élément. id doit être cohérent avec l'identifiant du conteneur (l'exemple est "myModal").

Si vous souhaitez fermer la boîte modale en cliquant en dehors de la boîte modale. Vous pouvez ajouter la classe <a> à la balise .close-reveal-modal du bouton de fermeture de la boîte modale pour y parvenir.

Remarque : Les curseurs nécessitent JavaScript. Il faut donc initialiser 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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Taille de la boîte modale

Vous pouvez ajouter la classe suivante sur le conteneur de la boîte modale pour définir la taille de la boîte modale :

  • .tiny : 30% de largeur

  • .small : 40% de largeur

  • .medium : 60% de largeur

  • .large : 70 % de largeur

  • .xlarge : 95% de largeur

  • .full : 100 % de largeur et de hauteur

Remarque : la largeur par défaut est de 80 % sur les tablettes, les ordinateurs portables et les PC, et de 100 % de largeur sur les appareils à petit écran.

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Boîte modale intégrée

Vous pouvez intégrer une boîte modale dans une boîte modale et vous pouvez ajouter un nouveau bouton de déclenchement sur la première boîte modale. Vous devez définir un identifiant unique pour le modal en ligne :

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>

Exécuter l'instance»

Cliquez sur « Exécuter l'instance " bouton pour visualiser l'instance en ligne

La deuxième boîte modale remplacera la première boîte modale. Si vous souhaitez ouvrir le deuxième modal sans fermer le premier modal. Vous pouvez ajouter l'attribut data-options="multiple_opened:true;" sur la deuxième case modale :

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>

Exécuter l'instance»

Cliquez le bouton "Exécuter l'instance" pour visualiser l'instance en ligne