[Bootstrap3] モーダル・ダイアログの使い方

2019-03-232019-12-27JavaScriptBootstrap3,jQuery

Bootstrap にはモーダルが用意されていて、データの受け渡しもできる

モーダルを呼び出す

呼び出しボタンは button タグでも、a タグでも OK

data-targetで、呼び出すモーダルを指定している
モーダル側は、class="modal"のdiv に、data-target と同じ id をつける

<!-- 呼び出しボタン aタグでもOK -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">
	モーダル・ダイアログ開く
</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>
				<button type="button" class="btn btn-primary">ボタン</button>
			</div>
		</div>
	</div>
</div>

モーダルの中のボタンに、data-dismiss="modal" を指定すると、モーダルを閉じるボタンになる

data-dismiss をつけない場合には、 javaScript とかに自分で何か書かないとただのボタンのまま

背景の設定

背景に関する設定は、 backdrop オプションで行う

エスケープキー押下時の設定

エスケープキー押下時、モーダルを閉じるかの設定は keyboard オプションで行う

データの受け渡し

モーダル呼び出しボタンに、 data-** という属性を作ってモーダルにデータを渡すことができる
data-hoge1 data-hoge2 のように書けば複数のデータを渡すことも可能

See the Pen Bootstrap3 Modal データ渡す by AgoPeanuts (@AgoPeanuts) on CodePen.

このサンプルでは、モーダル呼び出しボタンに、data-watasu="ほげホゲ" という属性を作り、属性の値“ほげホゲ"をモーダルで受け取り、モーダル本文の中 ( span id="morau" ) に出力している

<button type="button" class="btn btn-info modalBtn" data-toggle="modal" data-target="#sampleModal" data-watasu="ほげホゲ">モーダルにデータ渡す</button>
<p id="re"></p>
<!-- モーダル・ダイアログ -->
<div class="modal" id="sampleModal" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<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">
				<label><span id="morau"></span>の好きな食べ物:<input type="text" id="food"></label>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
				<button type="button" id="btn1" class="btn btn-primary">ボタン1</button>
			</div>
		</div>
	</div>
</div>

モーダル本文中の「の好きな食べ物:」に入力された値は、jQuery で取得し、親画面に出力している

$('#sampleModal').on('show.bs.modal', function (event) {
    //モーダルを開いたボタンを取得
    var button = $(event.relatedTarget);
    //data-watasuの値取得
    var watasuVal = button.data('watasu');
    //モーダルを取得
    var modal = $(this);
    //受け取った値をspanタグのとこに表示
    modal.find('.modal-body span#morau').text(watasuVal+'の');
});
// モーダルの中の「ボタン1」を押した時の処理
$("#btn1").on('click', function() {
  // モーダル閉じる
  $('#sampleModal').modal('hide');
  var foodVal = $('#food').val();
  $('#re').text(foodVal);
});

モーダル開く・閉じる

/* モーダルが開いていれば閉じ、閉じていれば開く */
$(セレクター).modal('toggle');
/* モーダル閉じる */
$(セレクター).modal('hide');
/* モーダル開く */
$(セレクター).modal('show');

モーダルのアクションイベント

$('#sampleModal').on('show.bs.modal', function (event) {
  .....
});

拾えるイベント

例えば、何かを入力してからモーダルを閉じると、再度モーダルを開いたときに元のデータが入力されたままになるので、モーダルを閉じたら入力データをクリアする場合。
(「データの受け渡し」の項のサンプルも、モーダルに入力後、再度開くと元のデータが残っていることが確認できる。)

$('#sampleModal').on('hidden.bs.modal', function (event) {
    // モーダルが非表示になったら id="food" の値をクリアする
    $('#food').val('');
});