Bootstrap-modal-plugin

提供：Dev Guides
移動先:案内、検索

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

モーダルは、親ウィンドウの上に階層化された子ウィンドウです。 通常、目的は、親ウィンドウを離れることなく何らかの相互作用が可能な別のソースからコンテンツを表示することです。 子ウィンドウは、情報、相互作用などを提供できます。

'_このプラグイン機能を個別に含める場合は、 modal.js が必要です。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

使用法

あなたは、モーダルプラグインの隠されたコンテンツを切り替えることができます-

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

オプション

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

Option Name Type/Default Value Data attribute name Description
backdrop boolean or the string 'static' Default: true data-backdrop Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboard boolean Default: true data-keyboard Closes the modal when escape key is pressed; set to false to disable.
show boolean Default: true data-show Shows the modal when initialized.
remote path Default: false data-remote

Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below − 

<a data-toggle = "modal" href = "remotel" data-target = "#modal">Click me</a>

方法

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

Method Description Example
Options − .modal(options) Activates your content as a modal. Accepts an optional options object. 
$('#identifier').modal({
   keyboard: false
})
Toggle − .modal('toggle') Manually toggles a modal. 
$('#identifier').modal('toggle')
Show − .modal('show') Manually opens a modal. 
$('#identifier').modal('show')
Hide − .modal('hide') Manually hides a modal. 
$('#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ボタンをクリックすると、モーダルウィンドウが終了します。

イベント

次の表に、モーダルで動作するイベントを示します。 これらのイベントを使用して、関数にフックすることができます。

Event Description Example
show.bs.modal Fired after the show method is called. 
$('#identifier').on('show.bs.modal', function () {
  //do something…
})
shown.bs.modal Fired when the modal has been made visible to the user (will wait for CSS transitions to complete). 
$('#identifier').on('shown.bs.modal', function () {
  //do something…
})
hide.bs.modal Fired when the hide instance method has been called. 
$('#identifier').on('hide.bs.modal', function () {
  //do something…
})
hidden.bs.modal Fired when the modal has finished being hidden from the user. 
$('#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>

上記の画面に見られるように、_Close_ボタン、つまり_hide_イベントをクリックすると、警告メッセージが表示されます。

「https://www.finddevguides.com/index.php?title=Bootstrap-modal-plugin&oldid=7332」から取得
Powered by MediaWiki