Question

我试图将此answer改编为我的缩略图，但它只能部分工作。

我的问题是它会在它出现的那一刻消失。

可能是什么解决方案？

<div class="thumbnail">
    <img src="http://cdn.shopify.com/s/files/1/0346/9741/products/Spaniel_PNG_1024x1024.png?v=1436758378" data-toggle="modal" data-target="#myModal">
    <div class="caption" >
        <h4>Project One</h4>
        <p>In this project I used HTML, CSS and Javascript.</p>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <img id="mimg" src="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

使用Javascript：

$(window).load(function(){
    $('img').on('click',function(){
        var sr=$(this).attr('src');                     
        $('#mimg').attr('src',sr);
        $('#myModal').modal('show');
    });
});

Answer 1

问题是您与图片上的自动初始化属性存在冲突，与手册modal.show()

冲突

<img data-target="#myModal" data-toggle="modal" src="...">

这些属性已经切换到相同的模态。

删除属性或不手动调用$('#myModal').modal('show');

如果您注释掉脚本

，它可以正常工作

Bootstrap模态在它出现的那一刻消失

1 个答案: