I have a popup I'm trying to both re-size dynamically and keep horizontally centered. Since the popup needs to work in both mobile and desktop environments, I wrote a quick bit of jQuery in order to handle the re-sizing and remove the margins if the window width is less than the max-width
of the popup. This all works as it should, except that whenever I slowly resize the window the popup defaults to hugging the left edge instead of staying centered. Here's my code, any help would be greatly appreciated as CSS is still going a bit over my head.
jQuery:
$(window).resize(function(){
var w = $('.body').width();
if (w > 1000) {
$('.popup_modal').css({"left": (w - 1000) / 2 + "px"});
} else if (w < 1000) {
$('.popup_modal').css({"left": "0px"});
}
});
CSS:
.popup_modal {
display: none;
width: 100%;
max-width: 1000px;
float: left;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 3px;
box-shadow: 0px 0px 5px #ccc;
position: relative;
margin-top: 20px;
padding: 20px;
}
Thanks!
Change to this code:
$(window).resize(function(){
var w = $(window).width;
if (w > 1000){
$('.popup_modal').css({"left" : (w-1000)/2 + "px"});
} else if (w < 1000){
$('.popup_modal').css({"left" : "0px"});
}
});