bootrap 2模態加載圖像

Question

我試圖在bootstrap3模態上動態加載圖像。

See that in action.

當我第一次點擊縮略圖我獲得圖像的源代碼。 當我關閉模式並再次單擊縮略圖時，它工作正常。

我的jQuery代碼：

jQuery('.featuredimglink').click(function(event) { 
    event.preventDefault(); 
    jQuery('.modal-body').empty(); 
    var title = jQuery(this).attr("title"); 
    jQuery('h3.modal-title').html(title); 
    var img = (jQuery(this).find('img').attr('src')).replace('-150x150', ''); 
    jQuery('.modal-body').html('<img src="'+ img +'" alt="'+ title +'" />'); 
    jQuery('#myModal').modal({show:true}); 
}); 

我的模態代碼：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3 class="modal-title"></h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    </div> 
</div> 

我還可以看到，

jQuery('#myModal').modal({show:true}); 

火災的錯誤：

Uncaught TypeError: Object [object Object] has no method 'modal'

任何提示？

預先感謝您。

議決

只是初始化點擊功能前的模式。這是我的最終代碼：

var mymodal = jQuery('#myModal').modal({ 
    show: false 
    }); 

    jQuery('.featuredimglink').on('click', function(event) { 
     event.preventDefault(); 
     jQuery('.modal-body').empty(); 
    var title = jQuery(this).attr("title"); 
    jQuery('h3.modal-title').html(title); 
    var img = (jQuery(this).find('img').attr('src')).replace('-150x150', ''); 
    jQuery('.modal-body').html('<img src="'+ img +'" alt="'+ title +'" />'); 
    mymodal.modal('show'); 
    }); 

Answer 1

如果您正在使用引導的模態對話框，你需要引用引導CSS和引導js文件。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

然後用

jQuery('#myModal').modal('show');