2012-02-19 22 views
25

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

が頭である:

<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> 

何か案が?

答えて

43

あなたは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

+1

うん、これは仕事をしていません:これは、このように、widget methodを使用して行うことができます!ありがとう。 –

+0

はい、z-indexはblockUIのトリックを行います。 – Gunasegar

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' } 
    }); 
    
+0

[UPDATED DEMO](http://jsfiddle.net/D8sr6/1/)@ didier-ghys –