Rana Zubair
Rana Zubair

Reputation: 189

jQuery modal height responsive

This is my HTML code and below is the jquery code.

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

and here is my jQuery code

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

});

My all popup is working fine just i want height responsive on all devices as its working fine on width but on height its not working please help me ..

Upvotes: 0

Views: 448

Answers (3)

Irontiga
Irontiga

Reputation: 23

Use the jquery .height() function. http://api.jquery.com/height/

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

Upvotes: 0

user4284772
user4284772

Reputation:

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

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

Upvotes: 2

kavinhuh
kavinhuh

Reputation: 739

you got to use viewport Sized Typography for height

    .popup {height:1vw
}

vw: 1/100th viewport width vh: 1/100th viewport height vmin: 1/100th of the smallest side vmax: 1/100th of the largest side

Upvotes: 0

Related Questions