ブートストラップモーダルボックス

Bootstrap Modal プラグイン

Modal は、親フォームをカバーする子フォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは情報や対話などを提供します。

このプラグインの機能を個別に参照したい場合は、modal.jsを参照する必要があります。あるいは、ブートストラッププラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

使用法

モーダルプラグインの非表示コンテンツを切り替えることができます:

data 属性経由: コントローラー要素 (ボタンやリンクなど) に属性を設定します data-toggle=" modal" を設定し、さらに data-target="#identifier" または href="#identifier" を設定して、切り替える特定のモーダルボックス (id="identifier" を持つ) を指定します。
JavaScript 経由: この手法を使用すると、JavaScript の単純な行で id="identifier" を指定してモーダルを呼び出すことができます:
```
$('#identifier').modal(options)
```

Instance

例に示すように、静的なモーダルウィンドウインスタンス以下:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 模态框（Modal）插件</title>
     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
   data-target="#myModal">
   开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  ×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div class="modal-body">
            在这里添加一些文本
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary">
               提交更改
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

結果は次のとおりです:

コードの説明:

モーダルウィンドウを使用するには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。
上記のコードをよく見ると、<button> タグ内で、data-target="#myModal" がページにロードするモーダルのターゲットであることがわかります。ページ上に複数のモーダルを作成し、モーダルごとに異なるトリガーを作成できます。当然のことですが、複数のモジュールを同時に読み込むことはできませんが、異なる時間に読み込まれる複数のモジュールをページ上に作成することはできます。
モーダルボックスでは 2 つの点に注意する必要があります。

1 つ目は .modal で、<div> のコンテンツをモーダルボックスとして識別するために使用されます。
2つ目は.fadeクラスです。モーダルを切り替えると、コンテンツがフェードインまたはフェードアウトします。

aria-labelledby="myModalLabel"、この属性はモーダルボックスのタイトルを参照します。
属性 aria-hidden="true" は、トリガーが起動される (関連するボタンをクリックするなど) までモーダルウィンドウを非表示にしておくために使用されます。
<div class="modal-header">、modal-header は、モーダルウィンドウのヘッダーのスタイルを定義するクラスです。
class="close"、close は、モーダルウィンドウの閉じるボタンのスタイルを設定するために使用される CSS クラスです。
data-dismiss="modal"は、カスタム HTML5 データ属性です。ここではモーダルウィンドウを閉じるために使用されます。
class="modal-body" は、Bootstrap CSS の CSS クラスで、モーダルウィンドウの本体のスタイルを設定するために使用されます。
class="modal-footer" は、Bootstrap CSS の CSS クラスで、モーダルウィンドウの下部のスタイルを設定するために使用されます。
data-toggle="modal"、HTML5 カスタムデータ属性 data-toggle は、モーダルウィンドウを開くために使用されます。

オプション

モーダルウィンドウ (モーダルウィンドウ) の外観をカスタマイズするために使用できるオプションがいくつかあります。それらは data 属性または JavaScript を通じて渡されます。オプションは以下の表にリストされています:

+ 静的な背景を指定すると、ユーザーがモーダルボックスの外側をクリックしてもモーダルボックスは閉じません。 data-keyboard falseに設定すると、エスケープキーが押されるとモーダルボックスが閉じます。 data-show 初期化時にモーダルを表示します。 data-remote jQuery メソッドを使用して、モーダルボックスの本体にコンテンツを挿入します。有効な URL を含む href を追加すると、その中のコンテンツがロードされます。次の例に示すように:

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

メソッドここでは、modal() で使用できる便利なメソッドをいくつか紹介します。コンテンツをモーダルボックスとしてアクティブ化します。オプションの options オブジェクトを受け入れます。

$('#identifier').modal({
keyboard: false
})

keyboard	boolean	デフォルト値: true
	showboolean	デフォルト値: true
	remotepath	デフォルト値: false
.load
メソッド	説明インスタンス		オプション: .modal(options)

Toggle: .modal('toggle') モーダルボックスを手動で切り替えます。

$('#identifier').modal('toggle')

Show: .modal('show')

$('#identifier').modal('show')

Hide: .modal('hide') インスタンス例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 模态框（Modal）插件方法</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模态框（Modal）插件方法</h2>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" 
               aria-hidden="true">×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div class="modal-body">
            按下 ESC 按钮退出。
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary">
               提交更改
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

</body>
</html>

E 実行例 » ESC キーをクリックするだけで、モーダルウィンドウが終了します。イベント次の表は、モーダルボックスで使用されるイベントの一覧です。これらのイベントは関数のフックとして使用できます。


モーダルボックスを手動で開きます。
モーダルを手動で非表示にします。		$('#identifier').modal('hide')
以下の例は使用法を示しています:
[実行例] ボタンをクリックしてオンラインインスタンスを表示します。

Event

Description

Instance

show.bs.modal

showメソッドを呼び出した後に発生します。

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

shown.bs.modal

モーダルがユーザーに表示されると発生します (CSS トランジション効果が完了するまで待機します)。

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

hide.bs.modalhidden.bs.modal

例

次の例は、イベントの使用法を示しています:

インスタンス

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

結果は次のとおりです:

上の例に示すように、hideイベントであるCloseボタンをクリックすると、警告メッセージが表示されます。

← ブートストラップトランジションエフェクト

ブートストラップドロップダウンメニュー →

提出する

PHP中国語ウェブサイト

Hide インスタンスメソッドが呼び出されたときに発生します。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
モーダルがユーザーから完全に非表示になったときに発生します。	りー