0

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!

ipixel
  • 519
  • 8
  • 21
  • I hereby point you to magnific popup: http://dimsemenov.com/plugins/magnific-popup/ – Kai Qing Aug 19 '14 at 01:09
  • I'd rather build my own, a day without learning is a day wasted :) – ipixel Aug 19 '14 at 01:10
  • Try adding this line of code `$('.quickStart').click(function(e){ return false; });` – dunli Aug 19 '14 at 01:12
  • @dunli yep that did the trick. So preventing default on quickStart fixes it, but why was quickStart triggering the webFade.click()?? THANKS – ipixel Aug 19 '14 at 01:13
  • Could be a duplicate [Prevent parent container click event from firing when hyperlink clicked][1] [1]: http://stackoverflow.com/questions/1997084/prevent-parent-container-click-event-from-firing-when-hyperlink-clicked – Jonathan Massot Aug 19 '14 at 01:15
  • i'd say the hour I spent learning how to use magnific popup was worth a lot more than the many days I wasted building these myself. But I get it. It's good to know how and why – Kai Qing Aug 19 '14 at 01:16
  • @ipixel quickStart is a child of webFade so it also triggers the `click()` of its parent. ` – dunli Aug 19 '14 at 01:16
  • Yep, now i understand. Seems silly but i'll remember it next time. – ipixel Aug 19 '14 at 01:16

1 Answers1

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/

Robert
  • 21,110
  • 9
  • 55
  • 65
  • Hmmm ok i gotta read into propagation. I'm not understanding why quickStart was triggering webFade.click THANKS! – ipixel Aug 19 '14 at 01:14
  • 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. – Robert Aug 19 '14 at 01:17