Bootstrap如何弹出modal窗，并动态传值

 1 <div class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="information">
 2   <div class="modal-dialog">
 3     <div class="modal-content">
 4       <div class="modal-header">
 5         <button type="button" class="close" data-dismiss="modal">
 6           <span>&times;</span>
 7         </button>
 8         <h4 class="modal-title">请扫描二维码，完成支付</h4>
 9       </div>
10       <div class="modal-body" style="text-align: center">
11         <p id="message"></p>
12         <img src="" alt="QRCode" id="scan">
13       </div>
14     </div>
15   </div>
16 </div>
17 <button id="popup" class="btn  btn-primary btn-lg btn-block">我弹</button>

 1 $(function () {
 2     $(\'#popup\').on(\'click\', function(){
 3       $(\'#qrcode\').modal(\'show\');
 4     });
 5     $(\'#qrcode\').on(\'show.bs.modal\', function (event) {
 6       var modal = $(this);  //get modal itself
 7       modal.find(\'.modal-body #message\').text(\'your message\');
 8       modal.find(\'.modal-body #scan\').attr("src", \'image src\');
 9     });
10   });

注意怎么展示和传值呢？

展示：点击事件触发后，用$(\'#模型框id\').modal(\'show\');

传值：

 1 $(function () {
 2     $(\'#popup\').on(\'click\', function(){
 3       $(\'#qrcode\').modal(\'show\');//展示
 4     });
 5     $(\'#qrcode\').on(\'show.bs.modal\', function (event) {//模型框显示后，可以定义里面的值，这个不是动态的值，用处不大
 6       var modal = $(this);  //get modal itself
 7       modal.find(\'.modal-body #message\').text(\'your message\');
 8       modal.find(\'.modal-body #scan\').attr("src", \'image src\');
 9     });
10   });

方法二：

直接传递的是动态的值：

将页面数据传递到modal的首要步骤：把要传过去的值添加在在触发模态框的标签上

然后通过js把值从页面传递到模态框中：

$(function() {

$(\'#discussionModifyModal\').on(\'show.bs.modal\', function (event) {

var a = $(event.relatedTarget) // a that triggered the modal

var id = a.data(\'id\'), title = a.data(\'title\'), description = a.data(\'description\');

var modal = $(this)

modal.find(\'#cm-modal-id\').val(id);

modal.find(\'#cm-modal-title\').val(title);

modal.find(\'#cm-modal-content\').val(description);

});

原博：