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模式对话框

回答

相关问题