Question

这是我的HTML代码，下面是jquery代码。

<div class="popup-overlay">  
 <div class="popup " id="first">
   <div id="style-1" class="scrollbar">
    <div class="wdth123">
 <!-- some content here almost width of 500px height of 800px; -->
     </div>
    </div>
  </div>
</div>

这是我的jQuery代码

<script src="jQmodals.min.js"></script> 

<script type="text/javascript">

  $(function () {
    var modal = $('.popup-overlay').jQmodals();
    $('.open').on('mousedown', modal.open.bind(modal, '#first'));
    $(document).on('mousedown', '.popup .close-btn', modal.close.bind(modal));

});

  $(function () {
    var modal = $('.popup-overlay1').jQmodals();
    $('.opens').on('mousedown', modal.open.bind(modal, '#firsts'));
    $(document).on('mousedown', '.popups .close-btns', modal.close.bind(modal));

});

我的所有弹出窗口工作正常我希望高度响应所有设备，因为它在宽度上工作正常，但在高度上它不起作用请帮助我..

Answer 1

＆＃13;

$(document).ready(function(){
  var height = $(window).height();
  $(".popout").height(height);
  $(window).scroll(function(){
     height = $(window).height();
     $(".popout").height(height);
  });
  

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

＆＃13;

Answer 2

你必须使用视口大小的排版高度

    .popup {height:1vw
}

vw：1/100视口宽度 vh：1/100视口高度 vmin：最小边的1/100 vmax：最大边的1/100

Answer 3

使用jquery .height（）函数。 http://api.jquery.com/height/

$(document).ready(function(){
  $(".popout").height($(window).height());
  $(window).resize(function(){
    $(".popout").height($(window).height());
  });
});

jQuery模态高度响应

3 个答案: