モーダルプラグイン
モーダルプラグインは、現在のページの最上部に表示されるダイアログ・ボックス/ポップアップウィンドウです。
ヒント：プラグインは、（ブートストラップの個々の使用して、個別に含めることができる"modal.js"ファイル）、またはすべてを一度に（使用して"bootstrap.js"または"bootstrap.min.js" ）。
モーダルを作成する方法
次の例では、基本的なモーダルを作成する方法を示しています。
例
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
»それを自分で試してみてください 例の説明しました
"Trigger"の部分：
モーダルウィンドウをトリガーするには、ボタンやリンクを使用する必要があります。
その後、2含むdata-*属性を：
-
data-toggle="modal"モーダルウィンドウが開きます -
data-target="#myModal"モーダルのIDへのポイント
"Modal"部分：
親<div>モーダルのモーダルトリガするために使用されるデータ・ターゲット属性の値と同じであるID持っている必要があります("myModal")
.modalクラスは、コンテンツを識別する<div>モーダルとして、それにフォーカスをもたらします。
.fadeクラスでは、内外にモーダルをフェードトランジションエフェクトを追加します。 あなたはこの効果をしない場合は、このクラスを削除してください。
属性role="dialog"スクリーンリーダーを使用している人々のアクセシビリティを向上させます。
.modal-dialogクラスは、モーダルの適切な幅とマージンを設定します。
「モーダルコンテンツ」の部分：
<div>とclass="modal-content 」のスタイルモーダル（ボーダー、背景色など）。 この内側<div>モーダルのヘッダ、本文、およびフッターを追加。
.modal-headerクラスは、モーダルのヘッダのスタイルを定義するために使用されます。 <button>ヘッダ内が持っているdata-dismiss="modal"あなたがそれをクリックすると、モーダルを閉じ属性を。 .closeクラススタイル閉じるボタン、および.modal-titleクラススタイル適切な行の高さを持つヘッダ。
.modal-bodyクラスは、モーダルの本体のスタイルを定義するために使用されます。 ここで任意のHTMLマークアップを追加します。 段落、画像、ビデオなど
.modal-footerクラスは、モーダルのフッターのスタイルを定義するために使用されます。 このエリアは、右デフォルトで整列されることに注意してください。
モーダルサイズ
追加することにより、モーダルのサイズを変更.modal-sm小さなモーダルまたはのためのクラスを.modal-lg大型モーダルのためのクラスです。
サイズのクラスを追加し<div>クラスを持つ要素.modal-dialog ：
 | デフォルトでは、モーダルは平均的な広さで。 |
|---|
ブートストラップモーダルリファレンスを完了
すべてのモーダルオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くブートストラップJSモーダルリファレンス 。