1

我有一个简单的模态对话框，打开时会通过 AngularJS 在页面上添加一个覆盖。

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() 等......我实际上确实尝试过，但它似乎没有用。有任何想法吗？

4

1 回答 1

2

嗯，这很奇怪，但它似乎工作得很好。我在 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-27T16:21:35.177 回答