.PopBgd is 100% of the screens size with another div .PopUp contained within .PopBgd and appearing on top of it. Clicking on .PopBgd gives the desired effect of Hiding. However clicking anywhere in PopUp also runs the fadeOut part of the script below.

QUESTION How to prevent the fadeOut part of the script from triggering though overlying divs?

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
    $('.PopClose, .PopBgd').click(function() {
    $('.PopBgd').fadeOut();});
});

ANSWER

<button type="button" class="BtnPop" data-popup=".Pop1">CLICK</button>

<div class="Pop1 PopBgd">
  <div class="PopUp">
    <a class="PopClose">&#215;</a>
    <div>Content</div>
  </div>
</div>

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});

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

NEW QUESTION How to use StopPropogation when the target div's name is unknown? What I have tried above does not work.

I resolved my additional problem by simply adding a second class name that was static to the desired div to allow stopPropogation to work as normal.

.PopBgd is 100% of the screens size with another div .PopUp contained within .PopBgd and appearing on top of it. Clicking on .PopBgd gives the desired effect of Hiding. However clicking anywhere in PopUp also runs the fadeOut part of the script below.

QUESTION How to prevent the fadeOut part of the script from triggering though overlying divs?

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
    $('.PopClose, .PopBgd').click(function() {
    $('.PopBgd').fadeOut();});
});

ANSWER

<button type="button" class="BtnPop" data-popup=".Pop1">CLICK</button>

<div class="Pop1 PopBgd">
  <div class="PopUp">
    <a class="PopClose">&#215;</a>
    <div>Content</div>
  </div>
</div>

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});

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

NEW QUESTION How to use StopPropogation when the target div's name is unknown? What I have tried above does not work.

I resolved my additional problem by simply adding a second class name that was static to the desired div to allow stopPropogation to work as normal.

• javascript
• jquery
• z-index
• layer

• 1 e.StopPropagation() may help – bPratik Commented Mar 4, 2013 at 14:18
• e.StopPropagation() does not work in my situation as I cannot declare the divs name as it is variable. What I tried above does not work for me. – DreamTeK Commented Mar 4, 2013 at 15:25

1 Answer 1

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

.stopPropagation() "Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event."