blockui over jQueryUI模式對話框

我無法讓BlockUI在模態對話框中工作。
我試過後，z-index的問題看，但沒有成功......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>

任何想法？

來源

2012-02-19 Réjôme

您不指定您嘗試過的z-index。

的blockUI插件有一個選項來改變它創建的消息（documentation）的z索引：

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

jQuery的用戶界面對話框作爲option for specifying a z-index爲好。它的默認值是1000。所以，你必須設置爲BlockUI選擇一個較大的數字，假設2000：

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

DEMO

來源

2012-02-21 11:31:08

是的，這樣做的工作！謝謝。 – 2012-02-27 21:16:19

是的，z-index會爲blockUI做訣竅。 – Gunasegar 2017-10-03 04:32:02

感謝德羅巴的回答，它幫助讓我的軌道上。您會注意到Didier的答案中的jsfiddle在第一次打開對話框時起作用，但任何進一步打開和ajax都會導致出現在對話框下方的blockUI元素。對話框必須重新校準它的z-index，以便每次打開時都能成爲最頂級的狗。

我找到了解決這個兩種可能的方式：

「destroy」當它被關閉對話框並重新創建它，當它打開。

而不是阻塞整個用戶界面，只是阻止對話框。這可以通過使用widget method來完成，像這樣：

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

來源

2013-02-26 01:26:43

[UPDATED DEMO]（http://jsfiddle.net/D8sr6/1/）@ didier-ghys – 2013-02-26 01:55:51

blockui over jQueryUI模式對話框

回答

相關問題