0

私はjQuery.dialog（jQuery 1.7.1、jQuery-UI 1.8.18）で表示しているダイアログのあるWebページを持っています。私は次のように作成します：

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true, // etc....
});

<div>同じページに、要素のスタックから作成したリスト コントロールがあります。<div>積み上げられた要素のクリックを次のように聞きます。

$("#listEmployees div").on("click", "input", listEmployees_ItemClicked);

listEmployes_ItemChecked私のイベントハンドラはどこですか。jQuery ダイアログを表示すると、HTML ページのほとんどの要素が無効になっています。つまり、マウスのクリックに反応しません&c。ただし、リストのスタックはそうではありません。リスト内のアイテムをクリックすると、イベント ハンドラーが呼び出されます。

この問題を回避するには、ページにグローバル変数を導入する必要がありました。この変数はisDialogVisible、ダイアログを開くときに設定し、閉じるときにクリアします。グローバル変数が true の場合、イベント ハンドラーはイベントを無視します。言うまでもなく、これはハックであり、うまくスケーリングできません。

私の期待は、dialogモーダルである jQuery が開いている間、これらの要素からのすべての HTML 要素とイベントを無効にすることでした。この期待は間違っていますか？モーダル ダイアログが表示されているときにまだマウス クリックが表示されるのはなぜですか?

4

1 に答える 1

0

jQuery UI ダイアログ (1.10 より前のバージョン) にはzIndexプロパティがあります。CSS 内で使用されてzIndexいる値よりも高い値に設定します。z-index

例えば。

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true,
    zIndex: 99
});

この機能は、jQuery UI v1.10で削除されました。

zIndex オプションを削除

stack オプションと同様に、適切なスタック実装では zIndex オプションは不要です。z-index は CSS で定義され、スタックは、フォーカスされたダイアログがその親の最後の「スタック」要素になるようにすることで制御されるようになりました。

jQuery UI ダイアログにはメソッドがありますがmoveToTop()、これはダイアログをダイアログ コンテキストの一番上に移動するだけなので、ページ上の他のどのダイアログよりも上になります。CSS がスタッキングの問題を引き起こさないようにするのは、開発者の仕事です。「残念ながら」、jQuery UI は常に私たちの手を握っているわけではありません。

于 2013-11-12T11:29:18.230 に答える