2

jQuery UI Dialog で z-index の問題を解決しようとしています。質問Can't select or deselect mailboxes inside jQuery UI Modal Dialogに似ていますが、そこにバグレポートがあることを知っています。

したがって、推奨されるように z-index を上げようとして、次のコードを追加しました。 

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

chrome と firefox の console.log には次のように記載されています。

Uncaught ReferenceError: 代入の左辺が無効です

ただし、エラーにもかかわらず、チェックボックスが機能するようになりました（毎回コンソールエラーがスローされます）。問題のある行を削除すると、チェックボックスは「クリック不可」になります。これを適切にコーディングするにはどうすればよいですか？

私のHTML： 

<div id="dialog" title="Loading...">
    <p id="interface">Loading...</p>
</div>

(ちなみに、インライン スタイルを に追加しようとしましたが<p>、うまくいきませんでした:

<p id="interface" style="z-index:99999">Loading...</p>

そして AJAX を使用して、「#interface」の内容を次のような有効なチェックボックス HTML に置き換えます。

<label for="right">
  <input name="right" type="checkbox">
</label>

通常の jQuery/Dialog UI ファイルが含まれています。

最後に、これが機能していなかったため、次の方法でチェックボックスを手動で切り替えて、クリエイティブにしようとしました。

if ($(evform.target).prop('type')=="checkbox"){
      $(evform.target).checked;
}

*更新を編集*

2013 年 12 月 22 日 (EDGE プレリリース) の jQuery コアの時点で、このバグは修正されています。安定したバージョンがすぐにリリースされることを願っています (v1.10 になると思います)。http://jsfiddle.net/tj_vantoll/XXGQA/の jfiddle でテストできます。

http://bugs.jqueryui.com/ticket/6267

4

3 に答える 3

5

ではなくz-indexonを設定する必要があります。#dialog#interface

関数呼び出しに値を代入しようとしているため、コードはエラーをスローしています。したがって、コードは次のようになります。

$('#interface').click(function(evform){
  $('#dialog').css('z-index', 99999);
});

またはあなたのCSSでこれだけ：

#dialog { z-index: 99999; }

アップデート

このソリューションは防弾ではありません。jQueryUI について提出されたバグ レポートには、チェックボックスがz-indexダイアログの下のオーバーレイよりも低い場合に問題が発生すると記載されています。jQueryUIは、CSS標準に反する絶対的な方法でz-indexを比較しているようです（ただし、適切な比較はおそらくリソースを大量に消費することを考えると理解できます）。

したがって、実際の解決策は、ダイアログ内で設定している要素z-index(および) によって異なる場合があります。positionバグを回避するz-indexには、ダイアログ内で使用しないか、オーバーレイに (動的に) 割り当てられる値よりも高いことが保証されている値を設定します (したがって、私の 99999提案)。

于 2012-06-30T03:42:59.947 に答える
1

return false;問題は、クリックコーディングで発生したものであることが判明しました。

$('#interface').click(function(evform){
  *** did stuff here ***

   evform.preventDefault;
   return false; //This is the offending line of code
});

診断のために、ページの z-index が高いものを確認したかったので、次のように追加しました。

$('*').each(function(){
    if ($(this).css('z-index')>99) { 
        console.log ($(this).css('z-index')+", " + $(this).prop('class'));
    }
});

これにより、z-index が 99 を超えるすべての要素が得られました。ui-dialog は通常 1001 または 1002 に設定されていたため、@bfavaretto によってリストされた「99999」は十分に高かったことがわかりました。

なぜエラーが発生したのかはまだわかりませんがreturn false;、次のアップデートで問題が修正されることを願っています.

于 2012-07-01T03:07:19.697 に答える
1 
$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

する必要があります

$('#interface').click(function(evform){
  $('#interface').prop('z-index', 99999);
});

2 番目の引数 (指定されている場合) は、プロパティをその値に設定します。

于 2012-06-30T03:40:41.737 に答える