Close the overlay by clicking outside of it

Question

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay).

My issue arises from using JS with an event listener on #overlay-daddy, which is intended to hide the display property. However, it also triggers when clicking on #overlay itself. Any help would be appreciated!

Below is the code snippet:

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
  <div style="height: 50%; background-color: red"></div>
  <div style="height: 50%; background-color: green"></div>
  <div id="overlay-daddy">
    <div id="overlay">
    </div>
  </div>
  <script type="text/javascript">
    var dad = document.getElementById('overlay-daddy');
    //dad.addEventListener("click", function() { this.style.display = "none";});
    dad.addEventListener("click", function() { alert(this); });
  </script>
</body>
</html>

javascript html css

Answer 1

Answer №1

To prevent the event from propagating further, remember to include e.eventPropagation() within the event listener for the overlay.

var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');

overlay.addEventListener("click", function(e) {
  e.stopPropagation();
});

dad.addEventListener("click", function() {
  alert(this);
});

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
  <div id="overlay">
  </div>
</div>

Answer 2

To prevent the event from propagating further, remember to include e.eventPropagation() within the event listener for the overlay.

var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');

overlay.addEventListener("click", function(e) {
  e.stopPropagation();
});

dad.addEventListener("click", function() {
  alert(this);
});

#overlay-daddy {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
  <div id="overlay">
  </div>
</div>

Answer 3

Answer №2

Ensure a click handler is registered on #overlay where the default behavior is prevented;

One way to do this is:

document.getElementById('overlay').addEventListener('click', function(e) {
   e.preventDefault();
   e.cancelBubble();
   e.stopPropagation();
}, true);

It's worth noting that you may not need all three calls, but my memory is fuzzy on which ones are essential.

Answer 4

Ensure a click handler is registered on #overlay where the default behavior is prevented;

One way to do this is:

document.getElementById('overlay').addEventListener('click', function(e) {
   e.preventDefault();
   e.cancelBubble();
   e.stopPropagation();
}, true);

It's worth noting that you may not need all three calls, but my memory is fuzzy on which ones are essential.

Answer 5

Answer №3

To prevent the click event from triggering in the children of an overlay, you can check if the clicked element is the overlay itself and not one of its children by using if(event.target===this):

#overlay-parent {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/custom_styles.css">
</head>
<body>
  <div style="height: 50%; background-color: red"></div>
  <div style="height: 50%; background-color: green"></div>
  <div id="overlay-parent">
    <div id="overlay">
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById('overlay-parent');
    
   //parent.addEventListener("click", function() { this.style.display = "none";});
    
    parent.addEventListener("click", function(event) {
      if(event.target===this) alert(this);
    });
  </script>
</body>
</html>

Answer 6

To prevent the click event from triggering in the children of an overlay, you can check if the clicked element is the overlay itself and not one of its children by using if(event.target===this):

#overlay-parent {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background-color: #fff;
}

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/custom_styles.css">
</head>
<body>
  <div style="height: 50%; background-color: red"></div>
  <div style="height: 50%; background-color: green"></div>
  <div id="overlay-parent">
    <div id="overlay">
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById('overlay-parent');
    
   //parent.addEventListener("click", function() { this.style.display = "none";});
    
    parent.addEventListener("click", function(event) {
      if(event.target===this) alert(this);
    });
  </script>
</body>
</html>

Answer 7

Answer №4

The 'overlay' element is currently causing the 'click' event to propagate to its parent. To prevent this, you can incorporate the use of event.stopPropogation on your 'overlay' element.

To make this adjustment, consider updating your overlay element as shown below.

<div id="overlay" onclick="event.stopPropagation();">
</div>

Answer 8

The 'overlay' element is currently causing the 'click' event to propagate to its parent. To prevent this, you can incorporate the use of event.stopPropogation on your 'overlay' element.

To make this adjustment, consider updating your overlay element as shown below.

<div id="overlay" onclick="event.stopPropagation();">
</div>

Answer 9

Answer №5

It appears that your code is missing the bottom and right properties in #overlay-daddy

#overlay-daddy {
  position: absolute;
  z-index: 3; // edited
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0; // added bottom
  right: 0; // added right
}

Therefore, in order to click within #overlay-daddy, you must ensure its z-index is higher than #overlay

I hope this information proves useful to you.

Answer 10

It appears that your code is missing the bottom and right properties in #overlay-daddy

#overlay-daddy {
  position: absolute;
  z-index: 3; // edited
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0; // added bottom
  right: 0; // added right
}

Therefore, in order to click within #overlay-daddy, you must ensure its z-index is higher than #overlay

I hope this information proves useful to you.

Close the overlay by clicking outside of it

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the reason behind React deciding to skip the final question, even though it has been accurately saved to the

The getElementById function can only select one option at a time and cannot select multiple options

Searching for substrings in NodeJS using Express

Removing HTML tags from a string while preserving specific tags in JavaScript

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

Error: The specified module is missing an export that was requested

Updating classes when useState changes in React JS

Looking to display an alert message upon scrolling down a specific division element in HTML

What is the best way to create a slideshow using an IFrame?

Arrange a cluster of CSS table cells onto a fresh line

Utilize React to iterate through a dictionary and display each entry

do not display bullet points

What could be causing the lack of response from PHP Ajax?

Dynamically scrolling using SuperScrollorama and Greensocks

Inquirer doesn't waste time lingering for user input following a prompt

Is it possible to make changes to dynamically inserted HTML using jQuery.ajax?

Attempting to align a CSS card flip within a Bootstrap layout

Using Vue.js to implement dynamic table rowspan functionality

Sharing application state between different routes in React Router v4 can be achieved by using methods such