JSモーダル(modal.js)
モーダルプラグインは、現在のページの最上部に表示されるダイアログ・ボックス/ポップアップウィンドウです。
モーダルについてチュートリアルでは、私たちの読みBootstrapモーダルチュートリアル 。
モーダルプラグインクラス
| クラス | 説明 |
|---|---|
| .modal | モーダルを作成します。 |
| .modal-content | スタイルが正しくボーダー、背景色などを持つモーダル、モーダルのヘッダ、本文、フッタを追加するには、このクラスを使用します。 |
| .modal-header | モーダルのヘッダのスタイルを定義します |
| .modal-body | モーダルの本体のスタイルを定義します |
| .modal-footer | モーダルでフッターのスタイルを定義します。 注：この領域は、デフォルトでは右詰めされています。 これを変更するには、テキストアラインでCSSを上書き：左|センター |
| .modal-sm | 小さなモーダルを指定します。 |
| .modal-lg | 大規模なモーダルを指定します。 |
| .fade | inとoutモーダルをフェードアニメーション/トランジション効果を追加します |
モーダル経由にトリガdata-*属性を
追加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>
»それを自分で試してみてください トリガー経由のJavaScript
手動で有効にします。
モーダルオプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性については、のように、データーにオプション名を追加しdata-backdrop=""
| 名 | タイプ | デフォルト | 説明 | それを試してみてください |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | モーダルが暗いオーバーレイを持っているかどうかを指定します：
あなたが値を指定すると"static"それの外側をクリックしたときに、モーダルを閉じることはできません | JSを使用した データを使用して、 |
| keyboard | boolean | true | モーダルは、エスケープキーで閉じることができるかどうかを指定します(Esc) ：
| JSを使用した データを使用して、 |
| show | boolean | true | 初期化したとき、モーダルを表示するかどうかを指定 | JSを使用した データを使用して、 |
モーダル方法
次の表は、使用可能なすべてのモーダルメソッドを示します。
| 方法 | 説明 | それを試してみてください |
|---|---|---|
| .modal( options ) | モーダルなどのコンテンツをアクティブにします。 有効な値については、上記のオプションを参照してください。 | それを試してみてください |
| .modal("toggle") | モーダルを切り替えます | それを試してみてください |
| .modal("show") | モーダルを開きます。 | それを試してみてください |
| .modal("hide") | モーダルを非表示にします | それを試してみてください |
モーダルイベント
次の表は、使用可能なすべてのモーダルイベントを示します。
| イベント | 説明 | それを試してみてください |
|---|---|---|
| show.bs.modal | モーダルが示されようとしているときに発生します。 | それを試してみてください |
| shown.bs.modal | モーダルが完全に表示されたときに発生します（CSSの遷移が完了した後） | それを試してみてください |
| hide.bs.modal | モーダルが非表示にされる前に発生します | それを試してみてください |
| hidden.bs.modal | モーダルが完全に隠されている場合に発生します（CSSの遷移が完了した後） | それを試してみてください |
例
ログインモーダル
次の例は、ログインのためのモーダルを作成します。
例
<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> »それを自分で試してみてください