Problem hiding a click-triggered div when anywhere on the page is clicked while still keeping everything selectable

user_9868445 0
Viewed 40

Say a menu is triggered when a button is clicked, now

1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),

2_ Everything else on the page must still remain selectable throughout this process.

Here's what I've tried:

$(".dad").click(function() {
  $(".son").show();
  $(".mask").show();
});
$(".mask").click(function() {
  $(".son").hide();
  $(".mask").hide();
});
.dad {
  background: greenyellow;
  width: 20px;
  height: 20px;
  margin-top: 100px;
  z-index: 2;
}

.son {
  position: relative;
  left: 20px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  display: none;
  background: tomato;
  z-index: 2;
}

p {
  z-index: 2;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>

<p>This is a paragraph</p>
<div class="dad">
  <div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>

This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.

Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.

css jquery javascript
1 Answers

Hope it helpful...

$(".dad").click(function() {
  $(".son").show();
});
$(document).click(function (e) {
    var container = $(".dad"); 
    if(!container.is(e.target) &&  
    container.has(e.target).length === 0) {
        $(".son").hide();
    }
});
.dad {
  background: greenyellow;
  width: 20px;
  height: 20px;
  margin-top: 100px;
  z-index: 2;
}

.son {
  position: relative;
  left: 20px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  display: none;
  background: tomato;
  z-index: 2;
}

p {
  z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>

<p>This is a paragraph</p>
<div class="dad">
  <div class="son"></div>
</div>
<div class="uncle"></div>

user_96246750
Related