Creating HTML modal window in Internet Explorer 8

Question

How to create modal window in Internet Explorer 8 which grays out the whole screen and shows ajax spinner?

<div style="display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.4)">

Following div works fine Edge, but doesn't gray out the screen in IE8 and let's user interact with the page.

How to get this working in IE?

Answer 1

rgba and background-color doesn't seem to work in IE 8 caniuse_rgba caniuse_background-color

You can use background with a fallback

background: #EEE /* The Fallback */
background: rgba(0,0,0, 0.4)

Answer 2

IE 8 does not support opacity in the same way newer browsers do, but you can do it using the old Microsoft filter attribute.

See if this works for you:

background-color: rgba(0,0,0);
opacity: 0.4; /* Newer browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE8 */