Maison >interface Web >js tutoriel >Comment utiliser l'effet de transition Bootstrap Boîte modale de transition (Modal)

Comment utiliser l'effet de transition Bootstrap Boîte modale de transition (Modal)

高洛峰original: 2017-03-20 14:02:201967parcourir

Cet article présente principalement le Bootstrap Effet de transitionBoîte modale de transition (Modal), qui est très bonne et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Vous pouvez changer le contenu caché du plug-in modal :

1. Via l'attribut data : sur l'élément controller (tel que bouton ou lien) Définissez l'attribut data-toggle="modal" et définissez data-target="#identifier" ou href="#identifier" rel="external nofollow" pour spécifier la boîte modale spécifique à changer (avec id="identifier")

Via Javascript : Grâce à cette technique, vous pouvez appeler un modal avec id="identifier" avec une simple ligne de Javascript :

$(&#39;#identifier&#39;).modal(options)

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Bootstrap-模态框Modal</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
  </head> 
  <body> 
  <p class="container"> 
    <h2>创建模态框（Modal）</h2> 
    <!-- 按钮触发模态框 --> 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> 
    <!-- 模态框（Modal） --> 
    <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <p class="modal-dialog"> 
        <p class="modal-content"> 
          <p class="modal-header"> 
            <button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button> 
            <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> 
          </p> 
          <p class="modal-body"> 
            在这里添加一些文本 
          </p> 
          <p class="modal-footer"> 
            <button type="button" class="btn btn-default"data-dismiss="modal">关闭</button> 
            <button type="button" class="btn btn-primary">提交更改</button> 
          </p> 
        </p><!-- /.modal-content --> 
      </p><!-- /.modal --> 
    </p> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

Comment utiliser leffet de transition Bootstrap Boîte modale de transition (Modal)

Remarque :

aria-labelledby="myModalLabel" aria-hidden="true"

API officielle signifie que le paramètre de rôle pour les personnes aveugles ou certains appareils lisibles indique à l'appareil qu'il s'agit d'un air de boîte pop-up -labelledby=".." contient les informations de description, puis aria-hidden="true" les cache. La plupart des gens ne les utiliseront pas. Cette écriture est plus standardisée

Améliore la visibilité du. Accessibilité de la boîte modale

Assurez-vous d'ajouter les attributs

et role="dialog" à .modal pour pointer vers la barre de titre de la boîte modale ; ajoutez l'attribut aria-labelledby="..." à .modal-dialog. aria-hidden="true"

De plus, vous devez également ajouter des informations descriptives à la boîte modale .modal via l'attribut aria-describeby.

Rendu

Comment utiliser leffet de transition Bootstrap Boîte modale de transition (Modal)

Articles Liés

Voir plus