z-index or jquery issue

Question

So i'm trying to create an action where once a button is clicked the website get's covered by a transparent div and that div itself contains a box into which i'll put some content.

Here's what i've put together so far.

http://jsfiddle.net/6q8815p7/

When you click the get started button it triggers this:

$('.getStarted').click

At that point, i figure out how large the webFade div should be, and show it along with another box inside.

But my issue is, i want the whole thing to hide when the black background is clicked, but NOT when the white box is clicked. I've been messing with z-indexes but no matter what i try, when i click on the white box, the $('.webFade').click() function get's triggered anyway.

I'm not sure if my issue is with my CSS/z-index or if my jquery approach to it is wrong.

Any pointers would be much appreciated.

Thanks!

I hereby point you to magnific popup: dimsemenov.com/plugins/magnific-popup — Kai Qing
– Kai Qing, Commented Aug 19, 2014 at 1:09
I'd rather build my own, a day without learning is a day wasted :) — ipixel
– ipixel, Commented Aug 19, 2014 at 1:10
Try adding this line of code $('.quickStart').click(function(e){ return false; }); — dunli
– dunli, Commented Aug 19, 2014 at 1:12
@dunli yep that did the trick. So preventing default on quickStart fixes it, but why was quickStart triggering the webFade.click()?? THANKS — ipixel
– ipixel, Commented Aug 19, 2014 at 1:13
Could be a duplicate [Prevent parent container click event from firing when hyperlink clicked][1] [1]: stackoverflow.com/questions/1997084/… — Jonathan Massot
– Jonathan Massot, Commented Aug 19, 2014 at 1:15

Robert · Accepted Answer · 2014-08-19 01:13:20Z

1

You just want to stop propagation of the event through quickstart.

Add this to the method.

$('.quickStart').click(function (e) {
    e.stopPropagation();
});

Seen here http://api.jquery.com/event.stoppropagation/

answered Aug 19, 2014 at 1:13

Robert

21.4k9 gold badges57 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ipixel Over a year ago

Hmmm ok i gotta read into propagation. I'm not understanding why quickStart was triggering webFade.click THANKS!

Robert Over a year ago

Events propagate up the DOM, so parents are notified by default. This stops the parent of .quickStart from finding out about the event and acting on it. You can view the event information for the click event and use that information too. Another method (I'm not sure of it's compatibility throughout browsers) would be to ensure that e.target.className is quickStart and not getStarted.

Collectives™ on Stack Overflow

z-index or jquery issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related