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>×</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);
});
});
原博：