Internet Explorer: проблема с наложением / непрозрачностью

Question

Я пытаюсь создать диалоговое окно, используя следующий CSS:

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

и следующие JS:

var div = $("<div id='blackOverlay'></div");
$("body").prepend(div);

var div = $("<div id='whiteOverlay'></div");
div.html("Loading......");

var u = "myurl?function=example";
div.load(u);
$("body").prepend(div);

Это работает правильно в Firefox, Safari, Chrome и Opera.

К сожалению, в IE происходит сбой, по крайней мере, в версии 8.0. Цвет / непрозрачность применяется только к телу, а НЕ к другим DIV. Вместо того, чтобы «скрывать» все, что находится за blackOverlay, все (ссылки, кнопки, поля ввода, ...) по-прежнему можно использовать, хотя загруженный контент отображается правильно (спереди, в центре экрана).

Любая помощь приветствуется!

---

Спасибо, Джурен, за то, что указал мне правильное направление. После попытки обработать его так же, как описано здесь , я нашел следующий обходной путь:

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

и следующий CSS:

div.shine {
    display: none;
}

Я знаю, что это не самое лучшее решение, но я устаю бегать кругами из-за "особенностей" IE.

Answer 1

Вам нужно создать так называемую шайбу iFrame.IE рисует элементы управления над всем, что не является оконным, поэтому вы не сможете справиться с этим только с помощью CSS / HTML-хаков.

Вот краткий обзор Iframe Shimming http://www.macridesweb.com/oltest/IframeShim.html

Кроме того, библиотека Mootools More включает iFrame shim Feature http://mootools.net/docs/more/Utilities/IframeShim, как и большинство популярных структур javascript, создающих наложенные элементы пользовательского интерфейса.

Это класс IFrame Shim из библиотеки mootools more, чтобы дать вам представление не используйте этот , поскольку это зависит от других классов Mootoosl.

var IframeShim = new Class({

    Implements: [Options, Events, Class.Occlude],

    options: {
        className: 'iframeShim',
        src: 'javascript:false;document.write("");',
        display: false,
        zIndex: null,
        margin: 0,
        offset: {x: 0, y: 0},
        browsers: (Browser.Engine.trident4 || (Browser.Engine.gecko && !Browser.Engine.gecko19 && Browser.Platform.mac))
    },

    property: 'IframeShim',

    initialize: function(element, options){
        this.element = document.id(element);
        if (this.occlude()) return this.occluded;
        this.setOptions(options);
        this.makeShim();
        return this;
    },

    makeShim: function(){
        if(this.options.browsers){
            var zIndex = this.element.getStyle('zIndex').toInt();

            if (!zIndex){
                zIndex = 1;
                var pos = this.element.getStyle('position');
                if (pos == 'static' || !pos) this.element.setStyle('position', 'relative');
                this.element.setStyle('zIndex', zIndex);
            }
            zIndex = ($chk(this.options.zIndex) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;
            if (zIndex < 0) zIndex = 1;
            this.shim = new Element('iframe', {
                src: this.options.src,
                scrolling: 'no',
                frameborder: 0,
                styles: {
                    zIndex: zIndex,
                    position: 'absolute',
                    border: 'none',
                    filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
                },
                'class': this.options.className
            }).store('IframeShim', this);
            var inject = (function(){
                this.shim.inject(this.element, 'after');
                this[this.options.display ? 'show' : 'hide']();
                this.fireEvent('inject');
            }).bind(this);
            if (!IframeShim.ready) window.addEvent('load', inject);
            else inject();
        } else {
            this.position = this.hide = this.show = this.dispose = $lambda(this);
        }
    },

    position: function(){
        if (!IframeShim.ready || !this.shim) return this;
        var size = this.element.measure(function(){ 
            return this.getSize(); 
        });
        if (this.options.margin != undefined){
            size.x = size.x - (this.options.margin * 2);
            size.y = size.y - (this.options.margin * 2);
            this.options.offset.x += this.options.margin;
            this.options.offset.y += this.options.margin;
        }
        this.shim.set({width: size.x, height: size.y}).position({
            relativeTo: this.element,
            offset: this.options.offset
        });
        return this;
    },

    hide: function(){
        if (this.shim) this.shim.setStyle('display', 'none');
        return this;
    },

    show: function(){
        if (this.shim) this.shim.setStyle('display', 'block');
        return this.position();
    },

    dispose: function(){
        if (this.shim) this.shim.dispose();
        return this;
    },

    destroy: function(){
        if (this.shim) this.shim.destroy();
        return this;
    }

});

window.addEvent('load', function(){
    IframeShim.ready = true;
});