イベント Events
モーダル・ダイアログのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$(セレクター).on(イベント, function (e) {
// 処理
});
セレクターでモーダル・ダイアログを選択。
イベントは、show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modalの何れかを指定する。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.modal |
モーダル・ダイアログを開くshowメソッドを呼び出した時のイベント。
クリックによってshowメソッドを呼び出した場合、クリックされた要素を、イベントの relatedTargetプロパティとして使用可能。
|
| shown.bs.modal |
モーダル・ダイアログが完全に表示された時のイベント。
クリックによってモーダル・ダイアログを開いた場合、クリックされた要素を、イベントの relatedTargetプロパティとして使用可能。
|
| hide.bs.modal | モーダル・ダイアログを閉じるhideメソッドを呼び出した時のイベント。 |
| hidden.bs.modal | モーダル・ダイアログが完全に非表示になった時のイベント。 |
サンプル
サンプル
show.bs.modal:
shown.bs.modal:
ソースコード
HTML
<p>show.bs.modal: <span id="showBsModal"></span></p> <p>shown.bs.modal: <span id="shownBsModal"></span></p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ａ）」ボタン"> 開く（Ａ） </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ｂ）」ボタン"> 開く（Ｂ） </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal-body"> 本文 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>
JavaScript
<script>
$(function () {
$('#sampleModal').on('show.bs.modal', function (event) {
var clickBotton = $(event.relatedTarget).data('clickbotton');
$('#showBsModal').text(clickBotton+"をクリックしてshowメソッドを呼び出しましたね。");
});
$('#sampleModal').on('shown.bs.modal', function (event) {
var clickBotton = $(event.relatedTarget).data('clickbotton');
$('#shownBsModal').text(clickBotton+"をクリックしてモーション・ダイアログを表示しましたね。");
});
$('#sampleModal').on('hide.bs.modal', function () {
$('#showBsModal').text("");
});
$('#sampleModal').on('hidden.bs.modal', function () {
$('#shownBsModal').text("");
});
});
</script>
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。