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

2019-03-23JavaScriptBootstrap3, 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オプション行う

data-backdrop背景背景クリック時
true半透明モーダル閉じる
falseそのままモーダル閉じない
static半透明モーダル閉じない

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

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

data-keyboard="true" : モーダル閉じる
data-keyboard="false" : モーダル閉じない

データの受け渡し

モーダル呼び出しボタンに、data-**という属性を作ってモーダルにデータを渡すことができる

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) {
  .....
});
拾えるイベント
show.bs.modal : モーダルが開くとき (showメソッドを呼び出し時)
show.bs.modal : モーダルが表示されたとき
show.bs.modal : モーダルが閉じるとき (hideメソッドを呼び出し時)
show.bs.modal : モーダルが非表示になったとき

Posted by Agopeanuts