ホームページ >ウェブフロントエンド >jsチュートリアル >Bootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）

Bootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）

高洛峰オリジナル: 2017-03-20 14:02:201966ブラウズ

この記事では主にBootstrap トランジション効果トランジションモーダルボックス(Modal)を紹介します。これは非常に優れており参考価値があります。必要な友人はそれを参照できます

モーダルボックス(Modal)の非表示コンテンツを切り替えることができます。プラグイン :

1. data 属性を介して: controller 要素 (button やリンクなど) に属性 data-toggle="modal" を設定し、 を設定します。 >data-target= と同時に "#identifier" または href="#identifier" rel="external nofollow" を使用して、切り替える特定のモーダルボックスを指定します (id= を使用) identifier")data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框（带有 id="identifier"）

2、通过 Javascript：使用这种技术，您可以通过简单的一行 Javascript 来调用带有 id="identifier" 的模态框：

$(&#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>

Bootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）

注：

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

官方API 意思是为盲人或者一些可读设备设置的 role的设置告诉设备这是弹出框 aria-labelledby=".."里面是描述信息，然后aria-hidden="true"再把它隐藏掉，一般人用不到，这样写比较规范

增强模态框的可访问性

务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性，用于指向模态框的标题栏；为 .modal-dialog 添加 aria-hidden="true"

2、JavaScript

を介して: このテクノロジーを使用すると、「識別子」の単純な Javascript モーダルボックス:

rrreeerrreee

ブーツストラップトランジションエフェクトの使い方トランジションモーダルボックス(モーダル)

注:

rrreee Bootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）公式 API

は、視覚障害者または一部の読み取り可能なデバイスの役割設定が、これが説明情報を含むポップアップボックス aria-labelledby=".." であることをデバイスに伝え、その後 aria-hidden="true" を示すことを意味します。ほとんどの人はこれを使用しないので、このように記述するのが標準です

モーダルボックスのアクセシビリティを強化します必ず role="dialog" と を追加してください。 >aria-labeledby=".. ." 属性は、モーダルボックスのタイトルバーを指すために使用されます。aria-hidden="true" 属性を .modal-dialog に追加します。

さらに、 aria-descriptionby 属性を通じてモーダルボックス .modal に説明情報を追加する必要もあります。レンダリング

🎜関連記事: 🎜🎜🎜Bootstrapによる基本レイアウトの実装方法の詳細説明🎜🎜🎜🎜BootStrapテーブルの使い方の分析🎜🎜🎜🎜JSコンポーネント Bootstrap Tableテーブルの行ドラッグ効果の実装コード🎜 🎜

以上がBootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップフォームを使用してサンプルコードを作成する次の記事：ブートストラップフォームを使用してサンプルコードを作成する

続きを見る

Bootstrapトランジションエフェクトの使い方 トランジションモーダルボックス（Modal）

関連記事

Bootstrapトランジションエフェクトの使い方トランジションモーダルボックス（Modal）