モーダルプラグインは、現在表示しているページの最上部に表示されるダイアログボックス/ポップアップウィンドウです：
page:チップ: プラグインは、（Bootstrap の個々の "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>
Try it Yourself »
「トリガー」部分：
モーダルウィンドウをトリガーするには、ボタンやリンクを使用する必要があります。
次に、2 つの data-* 属性をインクルードします：
data-toggle="modal" は、モーダルウィンドウを開きますdata-target="#myModal" は、モーダルの id をポイントします「モーダル」の部分：
モーダルの親の <div> は、モーダルをトリガするために使用される data-target 属性の値と
同じ ID（"myModal"）を持たなければなりません。
.modal クラスは、<div> のコンテンツをモーダルと識別し、
それをフォーカスします。
.fade クラスは、モーダルにフェードインやフェードアウトのトランジション効果を追加します。
効果が必要なければ、このクラスを削除してください。
属性 role="dialog" は、スクリーンリーダを使用している人々のアクセシビリティを改善します。
.modal-dialog クラスは、モーダルの適切な幅とマージンを設定します。
「モーダルコンテンツ」の部分：
class="modal-content" を持つ <div><div> 内に、モーダルの header、body、footer を追加します。
.modal-header クラスは、モーダルヘッダのスタイルを定義するために使用します。
ヘッダ内の <button> には、クリックした時にモーダルを閉じるように、
data-dismiss="modal" を設定します。
.close クラスは閉じるボタンをスタイルし、.modal-title クラスは
適切な行の高さを持つヘッダにスタイルします。
.modal-body クラスは、モーダルの本体のスタイルを定義するために使用します。ここに、段落、画像、ビデオなど
の HTML マ ークアップを追加します。
.modal-footer クラスは、モーダルのフッターへスタイルを定義するために使用します。
このエリアは、デフォルトで右揃えになることに注意してください。
小さいなモーダルには .modal-sm クラス、大きなモーダルには .modal-lg クラスを追加し、
モーダルのサイズを変更します：
.modal-dialog を持つ <div> 要素に、size クラスを追加します：
By default, modals are medium in size.
すべてのモーダル・オプション、メソッドおよびイベントの完全なリファレンスは、 Bootstrap JS モーダル・リファレンスをご覧ください。