モーダルプラグインは、現在のページの最上位に表示されるダイアログ・ボックス/ポップアップウィンドウです。
モーダルに関するチュートリアルは、Bootstrap モーダル・チュートリアルをご覧みください。
| クラス | 説明 |
|---|---|
| .modal | モーダルを作成する |
| .modal-content | ボーダー、背景色などでモーダルを適切にスタイルする。 モーダルのヘッダー、本文、およびフッターを追加するためにこのクラスを使用する。 |
| .modal-header | モーダルのヘッダのスタイルを定義する |
| .modal-body | モーダルの本体のスタイルを定義する |
| .modal-footer | モーダルのフッターのスタイルを定義する。 注: このエリアは、デフォルトで右揃えです。変更するには、text-align:left|center で CSS を上書きします |
| .modal-sm | 小型のモーダルを指定する |
| .modal-lg | 大型のモーダルを指定する |
| .fade | モーダルをフェードイン・フェードアウトするアニメーション/トランジション効果を追加する |
要素に、data-toggle="modal" と data-target="#modalID" を追加します。
注: <a> 要素の場合、data-target を省略し、
代わりに href="#modalID" を使用します：
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
Try it Yourself »
手動で有効にします：
オプションは、data 属性または JavaScript を介して渡すことができます。data 属性の場合は、 data-backdrop="" のように、data- の後にオプション名を追加します。
| 名前 | 型 | デフォルト | 説明 | Try it |
|---|---|---|---|---|
| backdrop | ブール値か文字列の "static" | true |
モーダルのオーバレイを暗くするかどうかを指定する：
値に "static" を指定した場合、モーダルの外側をクリックしても閉じることはできません |
Using JS Using data |
| keyboard | boolean | true | モーダルを、エスケープキー（Esc）で閉じることができるかどうかを指定する：
|
Using JS Using data |
| show | boolean | true | 初期化したときに、モーダルを表示するかどうかを指定する | Using JS Using data |
次の表は、使用できる全モーダルメソッドの一覧です。
| メソッド | 説明 | Try it |
|---|---|---|
| .modal(options) | モーダルとしてのコンテンツをアクティブにする。有効な値については、上記のオプションを参照 | Try it |
| .modal("toggle") | Tモーダルを切り替える | Try it |
| .modal("show") | モーダルを開く | Try it |
| .modal("hide") | モーダルを隠す | Try it |
次の表は、使用できる全モーダル・イベントの一覧です。
| イベント | 説明 | Try it |
|---|---|---|
| show.bs.modal | modal が表示されようとしているときに発生 | Try it |
| shown.bs.modal | modal が完全に表示されたときに発生 (CSS のトランジションが完了した後) | completed)Try it |
| hide.bs.modal | modal が隠されようとしているときに発生 | Try it |
| hidden.bs.modal | modal が完全に隠されたときに発生 (CSS のトランジションが完了した後) | Try it |
次の例は、ログイン用モーダルを作成します：
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
Try it Yourself »