Javascript 具有引导功能的图像库，具有较大图像的缩略图

我正在忙着使用Bootstrap3的图像库

因此，如果我点击一个图像，你会看到弹出窗口-这当然很好，但如果你点击其他地方/背景，弹出窗口不会消失-它会粘在屏幕上

我的代码：

@model  ContosoUniversity.Models.UserProfile

@{
    ViewBag.Title = "Details";
}

@*<h2>Details</h2>*@

<link href="~/Content/ShowMoreImages.css" rel="stylesheet" />



<div class="container">

    <ul>
        <li><img src="~/Images/LCC_logo3.gif" alt="" height=150 width=200 /></li>
    </ul>

    <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 -->
    @*</ul>*@
</div> 



    <script>
        $(document).ready(function () {

            $('li img').on('click', function () {
                var src = $(this).attr('src');
                var img = '<img src="' + src + '" class="img-responsive"/>';
                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function () {
                    $('#myModal .modal-body').html(img);
                });
                $('#myModal').on('hidden.bs.modal', function () {
                    $('#myModal .modal-body').html('');

                });
            });

            $("#myModal").mouseup(function (e) {
                if (e.target !== this) return;
                $('#myModal').modal('hide');
            });

        });


</script>

---

您的HTML标记还不够充分，如果您可以在预览模式下使用F12并提供该模式的DOM结构，那么效果会更好。查看您的代码，我想到了这个，在脚本中添加了第二个函数，$myModal上的Mouseup

如果单击模式框零件的褪色外部，它将隐藏模式窗口

根据您的评论，我猜标记本身有问题。在具有相同模态ID的多个元素中，等等。

---

看一看非常详细的信息，提供了应用程序和示例，创建图库应该不难。

感谢answare Chique，但什么都没有发生。但是我也没有看到任何javascripts错误Chrome@Nielsfischerein编辑了我的代码，请使用它并告诉我它是否有效。我更新了我的帖子，但图像没有消失。你有一些其他元素在主模式褪色背景上阻塞，这就是为什么我问你的页面链接，我需要查看DOM结构。是的，好的，但它仍然是本地的，我可以给你发电子邮件我的是：尼尔斯。fischereinie@gmail.com

<script>
$(document).ready(function () {

    $('li img').on('click', function () {
        var src = $(this).attr('src');
        var img = '<img src="' + src + '" class="img-responsive"/>';
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function () {
            $('#myModal .modal-body').html(img);
        });
        $('#myModal').on('hidden.bs.modal', function () {
            $('#myModal .modal-body').html('');

        });
    });

    $("#myModal").mouseup(function (e){
        if( e.target !== this ) return;
        $('#myModal').modal('hide');
    });             

});


</script>