javascript - 带有 Bootstrap 的图库，带有更大图像的缩略图

Question

我正忙于使用 bootstrap 3 制作图片库。

因此，如果我单击图像，您将看到弹出窗口 - 这当然很好，但如果您单击其他地方/背景，弹出窗口不会消失 - 它会停留在屏幕上。

我的代码:

@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>

Answer 1

您的 HTML 标记还不够，如果您可以 F12 并在预览模式下提供该模式的 DOM 结构，那就更好了。看看你的代码，我想到了这个，在你的脚本中添加了第二个函数，在 $("#myModal") 上调用了 Mouseup。

<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>

如果您单击褪色的(模态框外)部分，它将隐藏模态窗口。

---

根据您的意见，我猜标记本身有问题。正如在具有相同模态 ID 等的多个元素中一样。 看看
Bootstrap 3 Lightbox
提供了非常详细的信息、应用程序和示例，创建图库应该不难。