javascript - Firefox 和 Chrome 中的 Bootstrap 模态轮播高度问题

Question

首先，我有如下结构的缩略图库。

    <div class = "row pictures">
        <div class="col-center col-xs-6 col-sm-4 col-lg-3">
            <a href="#lightbox" data-toggle="modal" data-slide-to="1">
                 <img class="col-center img-responsive thumbnail" src="" >
            </a>
        </div>

        <!-- some more pictures with different "data-slide-to" attributes --> 
   </div>   

文档末尾的模态代码如下所示:

<div class="modal fade and carousel slide" id="lightbox" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">         
            <div class="modal-body">
                <ol class="carousel-indicators">
                    <li data-target="#lightbox" data-slide-to="1" class="active"></li>
                    <li data-target="#lightbox" data-slide-to="2"></li>
                    <!-- some more li elements with different "data-slide-to" attributes -->

                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="" alt="First slide" class="img-responsive">
                    </div>
                    <!-- some more items without active class -->
                </div>
                <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>

问题是，模态框太大了。 我尝试用下面的 javascript 修复它，但它只在 Safari 中有效。我找不到在 Firefox 和 Chrome 中修复它的方法。

我使用 jQuery 1.11.1 和 Bootstrap 3.3.2。

<script type="text/javascript">

    $('.pictures a').on("click", function(){
        $('#lightbox').css({

            "margin-top": function () {
                return document.body.scrollTop;
            },
            "max-height": function () {
                return $(window).height();
            },
            "min-height": function () {
                return $(window).height();
            }
        });
    });

</script>

Answer 1

菜鸟问题。对于 Firefox :P，我只需要将 img 元素的最大高度设置为 100% 并将高度设置为 100%。