带有bootstrap的图片库，图片更大

Question

我尝试制作一个boostrap图片库。因此，如果您点击图像，则会弹出更大的图像。

我这样试试（html / css）：

<div id="tabs-2">
    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />

    <div class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile

            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">

                <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />

            </div>


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



        }
    </div>

</div>

的javascript：

@section scripts{
    <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('');
                });
            });
        })

    </script>
}

但是，如果我点击一个负担，没有任何反应。

所以我的问题是：如何让bootstrap图库工作？

谢谢

您将看到图像：