blockui over jQueryUIモーダルダイアログ

Question

モーダルダイアログでBlockUIを動作させることはできません。
Iは、zインデックスの問題の世話をしようとしましたが、成功せず...ここで私のWebページでは、

が頭である：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script> 
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" /> 

と身体：

<div id="dialog_test" title="Test"> 
    TEST 
</div> 

<a href="#" id="go">GO</a> 

<script> 
    $(function() { 
     $("#dialog_test").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Cancel": function() { 
        $(this).dialog("close"); 
       }, 
       "Ajax": function() { 
        $.ajax({ 
         "url" : "http://jquery.malsup.com/block/wait.php", 
         "success" : function(json) { 
          $("#dialog_test").dialog("close"); 
         } 
        }); 
       } 
      } 
     }); 

     $("#go").click(function(event) { 
      event.preventDefault(); 
      $("#dialog_test").dialog("open"); 
     }); 

    }); 

    $(document) 
     .ajaxStart(function() { 
      $.blockUI({ 
       theme: true 
      }) 
     }) 
     .ajaxStop($.unblockUI); 

</script> 

何か案が？

Answer 1

あなたはz-indexで試したことを指定しません。同様にoption for specifying a z-indexとして

// z-index for the blocking overlay 
baseZ: 1000, 

jQueryのUIダイアログ：

blockUIプラグインは、作成メッセージ（documentation）のz屈折率を変更するオプションを有しています。そのデフォルト値は1000です。ですから、BlockUIオプションの高い番号を設定する必要があり、のは2000年としましょう：あなたの答えのための

$.blockUI({ 
    theme: true, 
    baseZ: 2000 
}) 

DEMO

Answer 2

おかげディディエは、それが軌道に乗って私を得る助けました。 Didierの答えのjsfiddleはダイアログを初めて開いたときに動作しますが、それ以上開いていてajaxを指定すると、ダイアログの下にblockUI要素が表示されます。ダイアログは、開くたびにトップの犬になるようにz-indexを再調整する必要があります。

私はこの周りの2つの方法を見つけた：

1. 「destroy」は閉じられ、ダイアログと は、それが開かれたときにそれを再作成します。

2. UI全体をブロックするのではなく、 ダイアログをブロックするだけです。

   $(".selector").dialog("widget").block({ 
       theme: false, 
       message: '<h1>Wait for me please...</h1>', 
       css: { border: '3px solid #a00' } 
   });