Reputation: 189
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
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
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
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