CODEWITHSUNDEEP
jquerycss
omar
omar

Reputation: 63

Full screen opaque pop up

I have this jfiddle. I'm trying to open a popup that is full screen, responsive and on page load. I have it set to popup with a button. The problem is that it's not opening on page load and it's not full screen.

http://jsfiddle.net/rodmbo0m/

Here's my jquery

$(window).load(function(){
 jQuery(document).ready(function ($) {

$('[data-popup-target]').click(function () {
    $('html').addClass('overlay');
    var activePopup = $(this).attr('data-popup-target');
    $(activePopup).addClass('visible');

});

$(document).keyup(function (e) {
    if (e.keyCode == 27 && $('html').hasClass('overlay')) {
        clearPopup();
    }
});

$('.popup-exit').click(function () {
    clearPopup();

});

$('.popup-overlay').click(function () {
    clearPopup();
});

function clearPopup() {
    $('.popup.visible').addClass('transitioning').removeClass('visible');
    $('html').removeClass('overlay');

    setTimeout(function () {
        $('.popup').removeClass('transitioning');
    }, 200);
}

});
});

Upvotes: 0

Views: 706

Answers (1)

morissette
morissette

Reputation: 1099

http://jsfiddle.net/rodmbo0m/1/

This update makes a fullscreen popup.

Just switched positioning to be fixed and set boundaries for all four corners to 0 on popup-body

position:fixed;
top:0;
right:0;
left:0;
bottom:0;

Upvotes: 1

Related Questions