Internet Explorer中的模態對話框覆蓋不阻止懸停

我有一個簡單的模式對話框，打開時通過AngularJS向頁面添加疊加層。Internet Explorer中的模態對話框覆蓋不阻止懸停

var $mask = angular.element('#tbxContainerMask').length 
            ? angular.element('#tbxContainerMask') 
            : angular.element('<div id="tbxContainerMask"></div>').css({ 
             width: angular.element(window).width(), 
             height: angular.element(document).innerHeight(), 
             display: 'none' 
            }).appendTo('body');

這在Chrome，Firefox，Opera和Safari中按預期工作。

#tbxContainerMask { 
    position:absolute; 
    left: 0; 
    top: 0; 
    z-index: 10090;  
}

該模態有一個稍高的zIndex爲10100.所有的好和花花公子，直到我們來到Internet Explorer。疊加顯示與彈出式菜單一樣，但用戶可以將鼠標懸停在頁面的某些區域上並彈出菜單並觸發懸停效果。其他瀏覽器都沒有這樣做。如何使IE（我使用的是版本10，但也需要支持8 & 9）的行爲與其他瀏覽器一樣？我希望疊加層不允許「下面」項目上的懸停事件。基本上，我會稱之爲「預期」。謝謝你的幫助。我希望避免某種類型的處理程序捕獲覆蓋層上的mouseenter，並停止覆蓋層上的傳播或調用blur（）等......我確實嘗試過，但似乎並不奏效。有任何想法嗎？

來源

2013-08-27 Hcabnettek

我知道這並沒有幫助，因爲caniuse.com說，這是不支持IE，直到11 http://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned -element，但我想你可能想要在angularjs之外進行搜索，並嘗試一些更多的vanilla JS和HTML代碼來簡化問題。 – shaunhusain

添加'不透明度：0'，如果一個元素具有'透明'背景色，則可以訪問後面的元素。雖然看起來你已經知道這個... – Teemu

好吧，這很奇怪，但它似乎工作得很好。我添加了不透明度和濾鏡以及css規則的顏色，然後IE的行爲如預期。我嘗試將顏色設置爲透明，但它也不起作用。也許應用顏色會在Internet Explorer中設置某種上下文。我不知道。

#tbxContainerMask { 

    position:absolute; 
    left: 0; 
    top: 0; 
    z-index: 10090; 
    opacity: 0.1; 
    filter: alpha(opacity=10); 
    background: #fff; 

}

來源

2013-08-27 16:21:35 Hcabnettek

Internet Explorer中的模態對話框覆蓋不阻止懸停

回答

相關問題