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;
}

Answer 1

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 */    
}