StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.</p> <p>I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or <code>z-index</code> will have no effect and relatively / absolutely positioned elements will always be on top of them. </p> <p>You're animating the opacity manually, rather than using jQuery's built in <code>fadeOut</code> animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to <code>display: none</code>. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)</p> <p>This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a <code>.performer a</code> link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to <code>#whitepage</code> or stop the <a href="http://api.jquery.com/event.stopPropagation/" rel="nofollow">event propagating</a>.</p> <pre><code>$('.performer a').click(function(event) { $('.lightboxinfo, #whitepage').fadeIn(500); event.stopPropagation(); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload