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后面的所有内容，所有内容（链接，按钮，输入字段...）仍然可用。

任何帮助表示赞赏！

---

谢谢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的匀场http://www.macridesweb.com/oltest/IframeShim.html

另外，MooTools的多个库包括一个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; 
});