How can prevent the click on elements which under the transparent overlay div in windows phone?

Question

Am developing a mobile web application using html and javascript.I have a task to develop loading overlay in this application and I have made a transparent div as overlay ,while it po-up need to prevent the click on the elements which is under the transparent div.But only in windows mobile phones (IE browser) it's possible me to click the underlying elements.How I can prevent this? given below the css I have applied for it

.overlaypage {
top: 0px;
opacity: .5;
background: black;
position: absolute;
height: 100%;
width: 100%;
pointer-events: visible;
display: block;
z-index: 1001;
}

I have the same problem. Any solution? – Frank Feb 13 '16 at 12:11 — Frank, Feb 13 '16 at 12:11

score 13 · Answer 1 · answered Aug 30 '17 at 18:11

13

I found this question here first, but I found another SO post that had a CSS-only solution that worked for me here.

The gist of the CSS is as follows:

.overlay {
  height: 0px;
  overflow: visible;
  pointer-events: none;
  background:none !important;
}

In my case, I had text as well, and I didn't want users to be able to select it, so added the following (see user-select here and here):

.overlay {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
}

answered Aug 30 '17 at 18:11

User 1058612

3,739
1
27
33

could you explain this answer? the `pointer-events` makes sense, I'm confused about the other attributes. – Jason S Apr 30 '19 at 20:07
The CSS I used came from [another SO post](https://stackoverflow.com/a/26931709/1058612) (and that's where the other attrs come from), but it was explained as: _A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases._ I added the `user-select` stuff for text. – User 1058612 Apr 30 '19 at 21:08
this seems to allow tabbing through the iframe elements and you can still fill out a form in there. – Brandon Henry Dec 09 '19 at 18:10

score 4 · Answer 2 · answered Jan 11 '12 at 08:26

4

Add onclick attribure to overlaypage block. Like:

<div class="overlaypage" onclick="return false;"></div>

answered Jan 11 '12 at 08:26

Dlinny

57
2

2

the bad practice part is discussable - but it does work. The event returns false - and prevents propagation which stops the click event on the item below (by z-index, above by html tree structure) – Kristijan Jan 07 '14 at 08:40

score 0 · Answer 3 · answered Apr 05 '21 at 11:30

0

Just use the z-index to action element.

for more visit here: Disable Clicks on Div Overlay, But Allow Children Clicks

answered Apr 05 '21 at 11:30

Hasan Baig

491
6
17

How can prevent the click on elements which under the transparent overlay div in windows phone?

3 Answers3