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后面的所有内容之外，所有内容（链接，按钮，输入字段......）仍然可用，尽管加载的内容正确显示（在屏幕的正面，中间）。

感谢任何帮助！

谢谢jduren指出我正确的方向。尝试以与here所述类似的方式处理它后，我提出了以下解决方法：

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填充功能http://mootools.net/docs/more/Utilities/IframeShim，以及创建重叠UI元素的最流行的javascript框架。

这是来自mootools更多库的IFrame Shim类，让您了解所涉及的内容，不要使用此，因为它取决于其他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;
});

Internet Explorer：覆盖/不透明问题

1 个答案: