jQuery addClass example

Change class name on click in jQuery

by Shannon Whitty

HTML

<div class="booking-popup">
    <div class="booking-inner-popup">
        <label class="booking-close">
            <img src="https://handybin.com.au/wp-content/themes/quark-child/images/close.png" alt="Close Window">
        </label>
        <iframe src="https://handybin.com.au/booking/booking.php" data-src="https://handybin.com.au/booking/booking.php" width="100%" height="100%" frameborder="yes" scrolling="no" name="BookingFrame" id="BookingFrame"></iframe>
    </div>
</div>

CSS

.booking-popup{
	width:100%;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	position:fixed; 
	z-index: 99;
}
.booking-inner-popup {
    width: 80%;
    height: 90vh;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 40px auto;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}
.booking-close {
    cursor: pointer;
    font-size: 30px;
    position: absolute;
    right: -25px;
    top: -24px;
}
.booking-close img {
    width: 30px;
}

JavaScript

jQuery(document).ready(function(){
	var windowHeight = jQuery(window).height();
    jQuery('.booking-inner-popup').css('height', windowHeight * 0.9 | 0);
		
	jQuery( window ).resize(function() {
		var windowHeight = jQuery(window).height();
		jQuery('.booking-inner-popup').css('height', windowHeight * 0.9 | 0);
		
	});
	

	

});