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

Can you explain the meaning behind the code Array.remove = function() {...}?

Is there a correct way to properly duplicate a JSON array in Redux?

The Angular Google Maps Directive zooms in too much after the "place_changed" event has fired

How can Node.js developers properly utilize PM2 for their projects?

Troubles encountered with adapting apexcharts size within a react environment

Verify if the SaveAs dialog box is displayed

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

Binding iframes in Angular 6

Changing the `$location.path` updates the URL without triggering a redirect

Ways to transform a PHP function into one that can be invoked using Ajax

Ways to verify a correct email address using ReactJS

Learn how to incorporate the prettier command into your coding workflow by adding it as a devDependency before committing code or

ng-if directive in AngularJs will not function properly if the condition text includes a space

data-abide is flagging all fields as incorrect

Tips for deactivating a single edit button

The appearance of the page varies when viewed on different computers using the same version of Firefox

Managing the ajax response to showcase a button within datatables

"Utilizing AngulaJS to apply a class to the parent element when a radio button is

Transforming XML into Json using HTML string information in angular 8

Dealing with AJAX errors in React components after mounting