Question

我使用Magnific-Popup动态显示图像。 Magnific-Popup打开图像，但当我关闭图像时，我会遇到以下错误：

Invalid regular expression: /(^|\.)mfp(\.|$)/: Stack overflow

我的js代码是：

$('#display-modal div.modal-body').delegate(' table.damage_titles .photo_1 img', 'click', function(){
    var image = $(this).attr('src');
    $('#display-modal').modal('hide');
    $.magnificPopup.open({
        items:{
            src: image,
         },
        type: 'image'
    });
});

当我使用图像的路径而不是动态时它可以正常工作。

我从模态打开图像，所以在显示图像之前我使用modal('hide')删除模态。

下面我粘贴我的代码：

我打开模态和调用函数来添加内容：

$('.damage_details').on('click', function(){
    $('#display-modal').modal('show');
    view_damage_popup($(this));
});

功能

function view_damage_popup(button) {
    var damage = button.attr('id');
    $.post(params.url + 'ajax/get_damage_details', {'damage_id': damage}, function(result)
    {
        var details = $.parseJSON(result);
        console.log(details.room);

        $('#display-modal h3').html("Damage Details");

        $('#display-modal div.modal-body').html('')
            .append( 
                    '<table class="damage_titles table table-bordered tablesorter table-striped"><thead><tr>' +
                    '<th width="33%">Photo 1</th>' +
                    '<th width="33%">Photo 2</th>' +
                    '<th width="33%">Photo 3</th>' +
                    '</tr></thead><tbody><tr>' +

                    '<td class="photo_1">'+(details.photo_1?'<img class="example-image" src="'+params.url+'assets/uploads/damages/'+details.photo_1+'" alt="image-1"/>':'No Image')+'</td>' +
                    '<td class="photo_2">'+(details.photo_2?'<img class="example-image" src="'+params.url+'assets/uploads/damages/'+details.photo_2+'" alt="image-1"/>':'No Image')+'</td>' +
                    '<td class="photo_3">'+(details.photo_3?'<img class="example-image" src="'+params.url+'assets/uploads/damages/'+details.photo_3+'" alt="image-1"/>':'No Image')+'</td></tr></tbody></table>' +

        $('#display-modal div.modal-body div.form-group').append('<div class="messages"></div><br/><br/>');
    });
}

最终的Magnific-Popup代码：

$('#display-modal div.modal-body').delegate(' table.damage_titles .photo_1 img', 'click', function(){
    var image = $(this).attr('src');
    $('#display-modal').modal('hide');
    $.magnificPopup.open({
        items:{
            src: image,
         },
        type: 'image' // this is a default type
    });
});

Magnific-Popup：关闭时出错

0 个答案: