Databases
StackOverflow2013
Postsdbo
POInternet Explorer: Issue with Overlay / opacity
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer: Issue with Overlay / opacity
    text
    copied!<p>I'm trying to create a dialog window using the following CSS:</p> <pre><code>#blackOverlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; z-index: 1001; } #whiteOverlay { display: block; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; z-index:2002; overflow: auto; background: #c4e982; } </code></pre> <p>and the following JS:</p> <pre><code>var div = $("&lt;div id='blackOverlay'&gt;&lt;/div"); $("body").prepend(div); var div = $("&lt;div id='whiteOverlay'&gt;&lt;/div"); div.html("Loading......"); var u = "myurl?function=example"; div.load(u); $("body").prepend(div); </code></pre> <p>This works correctly in Firefox, Safari, Chrome and Opera.</p> <p><strong>Unfortunately it fails in IE</strong>, at least on version 8.0. The color/opacity is only applied to body and NOT on other DIV's. Instead of "hidding" everything behind the blackOverlay, everything (links, buttons, input fields, ...) is still usable although the loaded content is displayed correctly (in front, center of screen).</p> <p>Any help is appreciated!</p> <hr> <p>Thank you jduren for pointing me in the right direction. After attempting to handle it in similar way as described <a href="http://kent.dl.sourceforge.net/project/jqueryshim/jquery.shim.3.js" rel="nofollow noreferrer">here</a> I came up with the following workaround:</p> <pre><code>function shime() { jQuery.each(jQuery.browser, function(i) { if($.browser.msie){ $('div').each(function() { $(this).addClass("shine"); }); } }); } function unshime() { jQuery.each(jQuery.browser, function(i) { if($.browser.msie){ $(".shine").each(function() { $(this).removeClass("shine"); }); } }); } </code></pre> <p>And the following CSS:</p> <pre><code>div.shine { display: none; } </code></pre> <p>I know that it's not the best solution, but I'm getting tired of running in circles due to IE "features".</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload