ブートストラップ-モーダルプラグイン

モーダルは、親ウィンドウの上に階層化された子ウィンドウです。通常、目的は、親ウィンドウを離れることなく何らかの対話を行うことができる別のソースからのコンテンツを表示することです。子ウィンドウは、情報やインタラクションなどを提供できます。

このプラグイン機能を個別に含めたい場合は、 modal.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、bootstrap.jsまたは縮小されたbootstrap.min.jsを含めることができます。

使用法

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

Via data attributes −属性を設定する data-toggle = "modal" ボタンやリンクなどのコントローラー要素に、 data-target = "#identifier" または href = "#identifier" 特定のモーダル（id = "identifier"）をターゲットにして切り替えます。
Via JavaScript −この手法を使用すると、JavaScriptの1行でid = "identifier"のモーダルを呼び出すことができます。

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

例

静的モーダルウィンドウの例を次の例に示します-

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

モーダルウィンドウを呼び出すには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しました。
上記のコードを見ると、<button>タグに次のことがわかります。 data-target = "#myModal"ページにロードするモーダルのターゲットです。このコードを使用すると、ページ上に複数のモーダルを作成し、それぞれに異なるトリガーを設定できます。明確にするために、複数のモーダルを同時にロードすることはありませんが、異なる時間にロードされるページに多くのモーダルを作成できます。
モーダルで注意すべき2つのクラスがあります-
- 最初は .modal、これは単に<div>のコンテンツをモーダルとして識別することです。
- そして2番目は .fadeクラス。モーダルを切り替えると、コンテンツがフェードインおよびフェードアウトします。
aria-labelledby = "myModalLabel"、属性はモーダルタイトルを参照します。
属性 aria-hidden = "true" トリガーが来るまで（関連するボタンをクリックするなど）、モーダルウィンドウを非表示に保つために使用されます。
<div class = "modal-header">、modal-headerは、モーダルウィンドウのヘッダーのスタイルを定義するクラスです。
class = "close"は、モーダルウィンドウの[閉じる]ボタンのスタイルを設定するCSSクラスのクローズです。
data-dismiss = "modal"は、カスタムHTML5データ属性です。ここでは、モーダルウィンドウを閉じるために使用されます。
class = "modal-body"は、モーダルウィンドウの本体のスタイルを設定するためのBootstrapCSSのCSSクラスです。
class = "modal-footer"は、モーダルウィンドウのフッターのスタイルを設定するBootstrapCSSのCSSクラスです。
data-toggle = "modal"、HTML5カスタムデータ属性data-toggleは、モーダルウィンドウを開くために使用されます。

オプション

モーダルウィンドウのルックアンドフィールをカスタマイズするために、データ属性またはJavaScriptを介して渡すことができる特定のオプションがあります。次の表にオプションを示します-

オプション名	タイプ/デフォルト値	データ属性名	説明
背景	ブール値または文字列 'static'デフォルト：true	データの背景	ユーザーがモーダルの外側をクリックしたときにモーダルを閉じたくない場合は、背景に静的を指定します。
キーボード	ブールデフォルト：true	データキーボード	エスケープキーが押されると、モーダルを閉じます。無効にするにはfalseに設定します。
公演	ブールデフォルト：true	データショー	初期化時にモーダルを表示します。
リモート	パスデフォルト：false	データリモート	jQuery .loadメソッドを使用して、モーダルボディにコンテンツを挿入します。有効なURLを持つhrefが追加されると、そのコンテンツが読み込まれます。この例を以下に示します- `<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>`

メソッド

modal（）で使用できるいくつかの便利なメソッドを次に示します。

方法	説明	例
Options − .modal（options）	コンテンツをモーダルとしてアクティブ化します。オプションのオプションオブジェクトを受け入れます。	`$('#identifier').modal({ keyboard: false })`
Toggle − .modal（ 'toggle'）	モーダルを手動で切り替えます。	`$('#identifier').modal('toggle')`
Show − .modal（ 'show'）	モーダルを手動で開きます。	`$('#identifier').modal('show')`
Hide − .modal（ 'hide'）	モーダルを手動で非表示にします。	`$('#identifier').modal('hide')`

例

次の例は、メソッドの使用法を示しています-

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Escボタンをクリックするだけで、モーダルウィンドウが終了します。

イベント

次の表に、モーダルで機能するイベントを示します。これらのイベントは、関数にフックするために使用できます。

イベント	説明	例
show.bs.modal	showメソッドが呼び出された後に発生します。	`$('#identifier').on('show.bs.modal', function () { // do something… })`
show.bs.modal	モーダルがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。	`$('#identifier').on('shown.bs.modal', function () { // do something… })`
hide.bs.modal	インスタンスの非表示メソッドが呼び出されたときに発生します。	`$('#identifier').on('hide.bs.modal', function () { // do something… })`
hidden.bs.modal	モーダルがユーザーから隠され終わったときに発生します。	`$('#identifier').on('hidden.bs.modal', function () { // do something… })`

例

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

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

上記の画面のように、[閉じる]ボタンをクリックすると、つまりイベントを非表示にすると、アラートメッセージが表示されます。