I have created an overlapping screen similar to Facebook's photo viewer, and it works well on Chrome, Safari, and Firefox. However, I am struggling to make it work on Internet Explorer (IE). The issue is that the div overlaps correctly but allows scrolling, which I want to avoid. I tried using overflow: hidden; when a button is clicked to prevent scrolling, and it worked. But now I am facing difficulty in allowing scrolling again. I have experimented with overflow: auto and some jQuery functions, but they do not seem to solve the problem. Additionally, I noticed that certain jQuery functions like $(document).ready(function() { ... }); are not working properly.
This is the code snippet for the overlapping effect:
var outercontent = document.getElementById('transparent');
var innercontent = document.getElementById('innercont');
browser = navigator.appName;
explore = "Microsoft Internet Explorer";
if(browser == explore) {
outercontent.style.zIndex = '9989';
outercontent.style.display = 'block';
outercontent.style.position = 'absolute';
outercontent.style.top = '0';
outercontent.style.left = '0';
outercontent.style.width = viewportwidth;
outercontent.style.height = viewportheight;
outercontent.style.margin = '0';
outercontent.style.padding = '0';
innercontent.style.left = '20%';
innercontent.style.background = 'white';
innercontent.style.zIndex = '9999';
innercontent.style.width = '60%';
innercontent.style.height = '80%';
innercontent.style.marginBottom = '10%';
innercontent.style.marginTop = '5%';
innercontent.style.padding = '10px';
}
In my HTML page, I have placed the following divs:
<div id='transparent' style='background-color: rgba(0, 0, 0, 0.5);
filter:
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr='#e5000000',EndColorStr='#e5000000');
text-align: center;'>
<div id='innercont' style='position: absolute; color: black;'></div>
</div>