Transition with jQuery popup

JavaScript
1

Hello,

I have a popup that appears when clicking on the login link on this page

You will see when you click the link, the background fades, the scroll bars are lost and a popup is displayed. It works fine but i don’t quite like the fact that i have had to remove the scroll bars. This was because when the use scrolled down the page the background was not faded like the top of the page.

There is a bug in IE7 as the scroll bars still appear.

So i was hoping that there would be either a css fix or jQuery fix for this? If i keep the scroll bars, when the user scrolls down the page when the popup is displaying i need the whole page to remain faded?

Is this possible anyone?

Many thanks, :shifty:

2

In the popup.js file what you can do is this, find the following lines which is in the centerPopup() function…

$("#backgroundPopup").css({
    "height": windowHeight
});

and change it to the following…

$("#backgroundPopup").css({
    "height": $(document).height()
});

What this will do instead is take the document height and not the client height as the document height will always change while the client height is a static height set when the page loads.

Next remove the 2 lines that remove and add the page overflow as they won’t be needed anymore, the last thing you can do which is something i find cool is smooth follow me elements. Essentially what that means is you can have an element such as your login box follow you and it will work all the way back in IE 6. See the below example on how to do this.

var popupStatus = false; // true = enabled | false = disabled

function loadPopup() {
    // Load the popup only if it is disabled
    if (!popupStatus) {
        $('#backgroundPopup').css('opacity', '0.7');
        $('#backgroundPopup, #popupContact').fadeIn('slow');
        
        $(window).unbind('scroll').scroll(function() {
            $('#popupContact').stop().animate({
                top: $(document).scrollTop() + ($('#popupContact').height() / 2)
            }, 'slow');
        });
        
        popupStatus = true;
    }
}

function disablePopup() {
    // Disable the popup only if it is enabled
    if (popupStatus) {
        $('#backgroundPopup, #popupContact').fadeOut('slow');
        popupStatus = false;
    }
}

function centerPopup() {
    // Request some client data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $('#popupContact').height();
    var popupWidth = $('#popupContact').width();
    
    $('#popupContact').css({
        position: 'absolute',
        top: windowHeight / 2 - popupHeight / 2,
        left: windowWidth / 2 - popupWidth / 2
    });
    
    $('#backgroundPopup').css('height', $(document).height());
}

$(function() {
    
    $('#inner-header-right-login').click(function() {
        centerPopup();
        loadPopup();
    });
    
    $('#popupContactClose, #backgroundPopup').click(function() {
        disablePopup();
    });
    
    $(window).keypress(function(e) {
        if (e.keyCode == 27 && popupStatus) {
            disablePopup();
        }
    });
    
});
3

Legend, thanks for that SgtLegend :slight_smile:

I love the scroll to thing where the box slides down with the page as the user scrolls.

Theres a slight but as sometimes the box doesn’t disappear when clicking on the ‘x’ button. I will see if i can figure this one out.

Thanks again :smiley:

4

Your welcome, the scrolling animation effect i only started using last night so i guess you had luck on your side :), as for the closing issue i think its because i grouped both close button and backgroundPopup selectors together. If you swap this back to your old cold it should hopefully work fine again. See the below code for reference as to what I’m taking about.

$('#popupContactClose, #backgroundPopup').click(function() {
    disablePopup();
});
5

Yes thats exactly what it was :slight_smile:

Thanks again, there’s so many places i can use this scroll effect, can’t thank you enough for this :smiley:

6

Your very welcome