Bootstrap3のモーダルウィンドウの使い方。
Bootstrap3ではクリックするとポップアップウィンドウが表示される、モーダルコンポーネントが搭載されています。メッセージやフォームの入力、大きいサイズの画像の表示など様々な用途に使用可能。
構造は少し複雑ですが、基本的な要素を押さえればそれほど難しくないので使ってみてください。
Bootstrap3 モーダルの使い方
モーダルの構造は大きく分けて、呼び出しボタンとモーダル本体の2つ。
呼び出しボタンはdata-toggle
とdata-target
のみ。本体は複雑な構造になってますが、.modal > .modal-dialog > .modal-content
の中にヘッダー、フッター、コンテンツが入るだけなのでテンプレートとして覚えておくと便利です。
また、.modal
classに.fade
をつけることでフェードインアニメーションを追加できます。
Class名 | 概要 |
---|---|
data-toggle="modal" |
Modalの呼び出しボタンとして機能させる |
data-dismiss="modal" |
モーダルを閉じるボタンとして機能させる |
data-target="#myModal" |
呼び出す対象を指定 |
.modal.fade |
モーダルのスタイルとフェードインアニメーションの追加 |
.modal-dialog > .modal-content |
モーダルを作成 |
.modal-header |
モーダルのヘッダー |
.modal-header > .modal-title |
モーダルのタイトルを表示 |
.modal-body |
モーダルのコンテンツ部分 |
.modal-footer |
モーダルのフッター |
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">
モーダルオープン
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">タイトル</h4>
</div>
<div class="modal-body">
モーダルのbody部分
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
モーダルのサイズを変更する方法
モーダルウィンドウは.modal-dialog
のところにサイズ用のclassを付け加えるだけでウィンドウサイズを変更することができます。
Class名 | 概要 |
---|---|
.modal-dialog.modal-lg |
大きいモーダルを作成 |
.modal-dialog.modal-sm |
小さいモーダルを作成 |
<!-- 大きいモーダル -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大きいモーダル</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
大きいモーダル
</div>
</div>
</div>
<!-- 小さいモーダル -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小さいモーダル</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
小さいモーダル
</div>
</div>
</div>
Modal.jsの使い方
Modalの設定オプション
モーダルウィンドウはオプションを書き換えることで設定を変更することができます。
option名 | 概要 |
---|---|
backdrop |
スライドのスピード |
keyboard |
Escキーでモーダルウィンドウを閉じる |
show |
初期化時にモーダルウィンドウを表示 |
// javascriptで設定
$('#myModal').modal({
backdrop: true,
keyboard: true,
show: true
})
また、オプションはJavascriptだけでなくdata-
属性としてHTML上に記述することもできます。
<!-- データ属性でオプション設定 -->
<div id="modalOption" class="modal fade" data-backdrop="true">
Modalを操作するコマンド
Modal.jsではオプションの他にモーダルウィンドウを操作するメソッドが用意されています。この機能を使うことで、再生・停止ボタンと言った操作機能を作ることが可能です。
function名 | 概要 |
---|---|
.modal('toggle') |
モーダルを開いたり閉じたりする |
.modal('show') |
モーダルを開く |
.modal('hide') |
モーダルを閉じる |
.modal('handleUpdate') |
前のページを表示 |
// テキストリンクでモーダルを開く
$('.modal-toggle-link').click(function () {
$('.modal-link').modal('toggle');
});
また、各動作ごとにイベントハンドラも用意されています。動作の始まりや終わりで処理を追加したい時に使えます。
function名 | 概要 |
---|---|
show.bs.modal |
モーダルウィンドウが呼び出されたら発動 |
shown.bs.modal |
モーダルが表示されたら発動 |
hide.bs.modal |
hideメソッドが呼び出されたら発動 |
hidden.bs.modal |
モーダルが隠れたら発動 |
// モーダルが呼び出されたら発動
$('#modal-js-sample').on('show.bs.modal', function () {
// 処理
});
// モーダル隠れたら
$('#modal-js-sample').on('hidden.bs.modal', function () {
// 処理
});