Create a div that overlay all page and captures all events

Question

I want a div that overlay all page and I want that the div captures all events (in particular touch) then if a button is in the page the button must not be clickable. I tried with:

background = document.createElement('div');
                background.style = `
                display:block;
                width:100%;
                height:100vh;
                position:fixed;
                top:0px;
                left:0px;
                z-index:9;
                background-color:black;
                opacity:0.3;`;
                document.body.appendChild(background);

and then

background.addEventListener('touchend', (e)=>{e.stopPropagation();}, true);

but it doesn't work. My page is in a cordova project.

Ok I've fixed, the problem was that in other portion of code I deleted the div before the div could manage the events.

...aaaand what have you tried so far to accomplish this, and where did you get stuck? — j08691, Apr 05 '17 at 20:30

score 0 · Answer 1 · answered Apr 05 '17 at 20:37

0

https://jsfiddle.net/bv2oLrcs/

HTML:

<div id="myDiv"></div>
<button>Click me if you can!</button>

CSS:

* {
  margin: 0;
  padding: 0;
}
#myDiv{
  width: 100%;
  height: 100%;
  border: 1px solid black;
  position: fixed;
}

answered Apr 05 '17 at 20:37

Konstantinos

943
1
9
20

I tried this solution but it doesn't work, my page is a page of a cordova project – asv Apr 05 '17 at 20:41

score 0 · Answer 2 · answered Apr 05 '17 at 20:40

This may not be the most elegant answer, but the first thing that comes to my head is create a div that wraps your entire page and then set its z-index to a really high number and its height 100% and width 100%

Something like this:

#overlay {
    width:100%;
    height:100%;
    z-index:1000;
}

<body>
<div id="overlay">

html content here!

</div>
</body>

<script>
$(document).on("click", "#overlay", function () {
    alert("overlay clicked")
});

Create a div that overlay all page and captures all events

2 Answers2