twitter-bootstrap
モーダルダイアログ

備考

HTMLの基本的な使い方

ブートストラップモーダルダイアログは、ページレベルのコンテンツ上に浮動するモーダルダイアログウィンドウを作成するブートストラップコンポーネントです。

次に、HTMLのBootstrapモーダルダイアログの基本的な使用例を示します。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

基本的なJavaScriptの使用と初期化

モーダルダイアログコンポーネントは、関数$('#myModal').modal(options)てjQueryによってインスタンス化することができます$('#myModal').modal(options)ここで$('#myModal')は特定のモーダルダイアログのトップレベルの参照で、 optionsはJavascriptオブジェクトですモーダルダイアログのデフォルト属性

optionsオブジェクトを使用すると、モーダルダイアログの動作に影響する複数のプロパティを定義できoptions 。これらのプロパティは次のように定義されます。

• backdropプロパティを使用すると、灰色の背景オーバーレイをモーダルダイアログの背後に表示するかどうかをユーザーが定義できます。ブール値と文字列 "static"が認識されます。 「静的」を指定すると、ユーザが背景オーバーレイをクリックしたときにモーダルダイアログが閉じられることはありません。
• keyboardプロパティでは、エスケープキーがキーボードで押されたときにモーダルダイアログを閉じるかどうかを定義することができます。
• showプロパティを使用すると、モーダルが初期化されたときにモーダルダイアログを表示するかどうかをユーザーが定義できます。

次に、基本的なJavaScriptの使用例を示します。

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

他のブートストラップコンポーネントと同様に、モーダルのオプションはデータ属性を介してHTMLで指定することもできます。