データを渡す
data-*属性とJavaScriptにより、モーダル・ダイアログにデータを渡すことができる。
サンプル
ソースコード
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-recipient="受信者名">
モーダル・ダイアログ 呼び出し
</button>
<!-- モーダル・ダイアログ -->
<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">
メッセーシ:<input type="text">
</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>
JavaScript
<script>
$('#sampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('recipient');
var modal = $(this);
modal.find('.modal-title').text(recipient + 'へのメッセージ');
});
</script>
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。