Hiding a overlay when using modal boxes on a parallax scrolling layout

Question

I'm designing a website that makes use of both parallax scrolling and modal boxes. When you open one of the modal boxes, I'm using jQuery and CSS to add a class to the popup's DIV element so that its opacity goes from 0 to 100; I'm using a transition to make this look pretty. When you close the box, jQuery strips the class out to set the opacity back to 0.

So that the modal boxes are more readable, I've put an overlay behind them (actually a containing DIV) that overlays a transparency over the rest of the screen using a width and height of 100%. I also use the same trick to take the opacity of this from 0 to 100 when the box is opened, and vice versa when it's closed.

The problem lies in that even at opacity 0, the overlay is still "above" some of the screen, rendering links and text viewable but not selectable. I've tried setting the Z-Index to 0 and -1 when the overlay is meant to be hidden, but because the parallax scrolling (I'm using a customised version of the SCRN template, for reference http://rodrigob.com/themes/scrn/) uses Relative, Fixed and Absolute positioning, the Z-Index only applies to some of the site.

As a workaround, styling the overlay with Visibility:Hidden works (as does Display:None, but I want to avoid that for accessibility reasons), but this can't be managed by a transition, so when the modal closes, it just disappears instead of fading out nicely.

Is there any way around this? I thought setting the Visibility to Hidden after the transition from 100 opacity to 0 had happened would work, but I don't know how to do this, if it can even be done at all.

Thanks in advance.

Answer 1

Setting "opacity: 100" or "visibility: hidden" on the overlay isn't actually removing the overlay. What you want to do is remove the element.

Conceptually speaking the overlay is still there. Its like glass above your content, you can see but you can't touch, the invisible overlay glass is still there. It's like super transparent glass window thats been washed with windex That guy is the user trying to click on those links below the overlay.

What you want to do is either remove the element from the DOM or set it to "display: none" after the transition.

The best solution that is cross browser I would use is to set display: none after the animation.

$(".overlay").animate({"opacity": "0"}, function(){
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
});

Personally I like to wrap my modals in a container and give it a fixed postion and remove the container along with the modal contents on hide but thats me.

I also like jeffery's fancy css transition end method too, if you want to be fancy with css3 but the caveat is you'd probably have to detect which vendor prefix you have to listen to.

Here are the vendor prefixed transition ends:

var transitionEnd = {
  'WebkitTransition' : 'webkitTransitionEnd'
  ,  'MozTransition'    : 'transitionend'
  ,  'OTransition'      : 'oTransitionEnd'
  ,  'msTransition'     : 'transitionend'
  ,  'transition'       : 'transitionend'
}

You'd have to write something to detect it which one is relevant to the user.

$(".overlay").on(transitionEnd, function() {
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
}

Answer 2

Use setTimeout to start the animation after the overlay appears, and hide the overlay after the animation is finished

to show overlay:

// show the overlay (in whatever manner you like) BEFORE the animation starts
// opacity is 0
$('#overlay').show();
setTimeout(function() {
  // fade in the opacity AFTER the overlay is there
  $('#overlay').addClass('opaque');
}, 0);

to hide overlay:

// fade out the opacity BEFORE the overlay goes away
$('#overlay').removeClass('opaque');
setTimeout(function() {
  // hide the overlay (in whatever manner you like) AFTER the animation is done
  // opacity is 0
  $('#overlay').hide();
}, 250);