Image gallery with bootstrap, thumbnail with bigger image

Question

I am busy with an image gallery, using bootstrap 3.

So if I click on a image you will see the popup - which is nice of course, but the popup doesn't disappear if you click somewhere else / background - it sticks on the screen.

My code:

@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

Your HTML markup isn't sufficient enough, would have been better if you could F12 and provide the DOM structure of that modal when its in preview mode. Looking at your code, I came up with this, added a second function to your script, called Mouseup on $("#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>

It will hide the modal window, if you click on the faded (outside of the modal box) part.

---

Depending on your comments, I am guessing there is something wrong in the markup itself. As in multiple elements having the same modal ID, and etc. Take a look at
Bootstrap 3 Lightbox
a very detailed information, application and examples are provided, shouldn't be hard to create a gallery.