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