How can I prevent clicks on items that are under a transparent overlay div in a Windows phone?

Question

I am developing a mobile web application using html and javascript. I have a task to develop overlay loading in this application, and I made a transparent div as an overlay, while for this I need to prevent clicking on the elements that are under the transparent div.But only in Windows mobile phones (IE browser) can I click essential elements. How can I prevent this? css below which i applied for it

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

Answer 1

Add the onclick block attribute to the overlaypage. How:

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

Answer 2

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

The bottom line of CSS is this:

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

In my case, I also had text, and I did not want users to be able to select it, so I 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 */ }