Popup Auto Height and Width

by Dennis Betman

HTML

<div onclick="hidePopup();" class="popupBG hidden"></div>
<div class="popup">
    <div class="content">
            <img src="http://wallpapergoo.com/wp-content/uploads/2015/06/HD-1080p-Wallpaper-E45.jpg" />
    </div>
</div>
<div onclick="showPopup(800);" class="baa">800px</div>
<div onclick="showPopup(500);" class="baa">500px</div>
<div onclick="showPopup(0);" class="baa">Standard value</div>

CSS

.popup {
    position:fixed;
    background: black;
    box-shadow: 0px 0px 31px rgba(0, 0, 0, 0.22);
    z-index: 500;
    max-height:500px;
    overflow:auto;
    opacity:0;
    display:none;
    box-sizing: border-box;
    padding: 20px;
    color:white;
}
.popupBG {
    position: fixed;
    z-index: 499;
    background: rgba(177, 177, 177, 0.68);
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity: 0;
    display: none;
    cursor:pointer;
}
.content {
    width:100%;
    opacity:0;
    float:left;
}
.content > div {
    width:100%;
}
.content img {
    width:100%;
    height:auto;
    float:left;
}
.fullSize {
    width:100% !important;
    height:100% !important;
    left:0px !important;
    top:0px !important;
    max-height: inherit !important;
    transition:all 0.3s linear;
}
.fullSize .content{
    width:100% !important;
}

JavaScript

// Create popup
function showPopup(optWidth, optThankYou) {
    var popupBG = $(".popupBG");
    var popup = $(".popup");

    if (optWidth <= 200) {
        optWidth = 200;
    }
    
    // Moet weg
    if(optWidth == '800'){
    	popup.find('.content').html('<img src="http://cartoondistrict.com/wp-content/uploads/2015/03/Free-Thor-Wallpaper-HD-for-Desktop-28.jpg" />')
    }
    if(optWidth == '500'){
    	popup.find('.content').html('<img src="http://wallpapergoo.com/wp-content/uploads/2015/06/HD-1080p-Wallpaper-E45.jpg" />')
    }
	
    if($(window).width() <= optWidth){
        popup.find(".content").css({
        	width: "100%"
    	});
    } else {
        popup.find(".content").css({
        	width: optWidth - 40
    	});
    }

    if (popupBG.hasClass('hidden') == true) {
        popupBG.addClass('show').removeClass('hidden');
        popupBG.css({
            "display": "block"
        }).animate({
            "opacity": "1"
        }, 300);
        popup.css({
            "display": "block"
        }).animate({
            "opacity": "1"
        }, 300).attr('class', 'popup').addClass('w' + optWidth);
        autoPopup({
            width: optWidth,
            height: popup.find('.content').height() + 40,
            thankYou: optThankYou
        });
        setTimeout(function () {
            popup.find('.content').animate({
                "opacity": "1"
            }, 300);
        }, 700);
    }
}

function hidePopup() {
    var popupBG = $(".popupBG");
    var popup = $(".popup");

    if (popupBG.hasClass("show") == true) {
        popupBG.removeClass('show').addClass('hidden');
        popupBG.animate({
            "opacity": "0"
        }, 300);
        popup.animate({
            "opacity": "0"
        }, 300);
        popup.find('.content').animate({
            "opacity": "0"
        });
        setTimeout(function () {
            popupBG.css({
                "display": "none"
            });
            popup.css({
               ...