Question

我正在尝试在bootstrap3模式上动态加载图像。

当我第一次点击缩略图时，我会得到图像的源代码。当我关闭模态并再次单击缩略图时，它可以正常工作。

我的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});

发生错误：

未捕获的TypeError：对象[object Object]没有方法'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

如果使用bootstrap作为模态对话框，则需要引用bootstrap css和bootstrap 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:true});

与

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

bootstrap 2模态动态加载图像

1 个答案: