帶有引導程序的圖像庫，帶有較大圖像的縮略圖

Question

我正在使用引導程序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結構，那就更好了。 查看您的代碼，我Mouseup了這一點，並在腳本中添加了第二個函數，在$("#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燈箱
提供了非常詳細的信息，應用程序和示例，創建畫廊應該不難。