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);

});

原博：