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 に答える