データを渡す
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
を読み込んだ後に配置する必要がある。