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结构会更好。看看你的代码，我想出了这个，在你的脚本中添加了第二个函数，在Mouseup上名为$("#myModal")。

<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
一个非常详细的信息，应用程序和示例，不应该很难创建一个库。

带有bootstrap的图库，带有更大图像的缩略图

1 个答案: