Bootstrap modal carousel height issue в Firefox и Chrome

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

Noob вопрос. Мне просто нужно было установить max-height элементов img на 100% и высоту до 100% для Firefox: P.