显示后弹出窗口不会消失

Question

我有一个带引导程序的图片库，但是在显示较大的图像后，它不会在图像外部消失后消失。我使用的是asp.net mvc 5

我有这个：

CSS / HTML：

<div id="tabs-2">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/1" alt="" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/2" alt="" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/3" alt="" />
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

这是jquery：

$(document).ready(function () {
            $myModal = $('#myModal');

            $('.row img.img-responsive').on('click', function () { // <-- notice the selector change
                var $this = $(this),
                    src = $this.attr('src'),
                    html = '<img src="' + src + '" class="img-responsive" />';

                updateModalBody($myModal, html);

                $myModal.modal();
            });

            $myModal.on('hidden.bs.modal', function () {
                updateModalBody($myModal, '');
            });

            function updateModalBody($modal, html) {
                $modal.find('.modal-body').html(html);
            }
        })

我在浏览器中没有出现任何错误。

谢谢

如果我使用它：

function updateModalBody($modal, html) {
                $modal.find('.modal-body').html(html);
                $modal.modal('hide');
            }

如果您点击其他图像，图像会消失，所以不在图像之外。

好的，

现在是我的javascript：

 $(document).ready(function () {
            $myModal = $('#myModal');

            $('.row img.img-responsive').on('click', function () { // <-- notice the selector change
                var $this = $(this),
                    src = $this.attr('src'),
                    html = '<img src="' + src + '" class="img-responsive" />';


                updateModalBody($myModal, html);

                $myModal.modal();
            });

            $myModal.on('hidden.bs.modal', function () {



                updateModalBody($myModal, '');
            });

            function updateModalBody($modal, html) {
                $modal.find('.modal-body').html(html);
                $modal.modal('hide');
            }

        })


        $(document).ready(function()  {
            $('#myModal').on('shown', function () {
                $('#myModal').modal('hide');
            })
        });

这是css / html：

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                    <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div class="modal-content">
                            <div class="modal-body"></div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->

            </div>

但关闭（x）按钮不起作用。