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?

http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8 — 3rdthemagical, Aug 05 '16 at 09:13

Olivier Boissé · Answer 1 · 2016-08-05T09:20:16.123

0

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)

edited Aug 05 '16 at 09:20

answered Aug 05 '16 at 09:12

Olivier Boissé

score 0 · Answer 2 · answered Aug 05 '16 at 16:52

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

2 Answers2