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中的模态对话框覆盖不阻止悬停

回答

相关问题