bootstrapのmodal dialogを動的に変化させる
bootstrapのmodal dialogの具体的な使い方は公式で
http://getbootstrap.com/javascript/#modals
まずは公式のをカスタマイズしたソースを載せておきます。
<script> $(function(){ $(function(){ $('#modal-trigger').hide(); $('#dummy').on('click', function(){ $('.modal-dialog').find('.modal-body').html('<h1>Hello world!</h1>'); $('.modal').modal('show'); }); }); }); </script> <button type="button" id="dummy">show</button> <!-- Button trigger modal --> <button type="button" id="modal-trigger" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> </button> <!-- Modal --> <button id="aaaaa">aaaaa</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
解説
$('#myModal').modal('show');
で手動で表示させることができます
<button type="button" id="dummy">show</button>
ダミーを用意しておいて
$('#dummy').on('click', function(){ $('.modal-dialog').find('.modal-body').html('<h1>Hello world!</h1>'); $('.modal').modal('show'); });
表示させる前に表示させる要素の中身を変更させます。