Jquery ui jQueryUI模式对话框上的blockui

Jquery ui jQueryUI模式对话框上的blockui,jquery-ui,dialog,blockui,Jquery Ui,Dialog,Blockui,我无法使BlockUI在模式对话框上工作。 我试图处理z指数问题,但没有成功 在我的网页中,标题如下: <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/lib

我无法使BlockUI在模式对话框上工作。
我试图处理z指数问题,但没有成功

在我的网页中,标题如下:

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

试验
$(函数(){
$(“对话测试”)。对话({
自动打开:错误,
莫代尔:是的,
按钮:{
“取消”:函数(){
$(此).dialog(“关闭”);
},
“Ajax”:函数(){
$.ajax({
“url”:”http://jquery.malsup.com/block/wait.php",
“成功”:函数(json){
$(“对话测试”)。对话(“关闭”);
}
});
}
}
});
$(“#go”)。单击(函数(事件){
event.preventDefault();
$(“对话测试”)。对话(“打开”);
});
});
$(文件)
.ajaxStart(函数(){
$.blockUI({
主题:真实
})
})
.ajaxStop($.unbui);

有什么想法吗?

您没有指定使用z-index尝试了什么

blockUI插件有一个选项可以更改它创建的消息的z索引():

jQueryUI对话框也是如此。其默认值为1000。因此,您必须为BlockUI选项设置一个更高的数字,比如说2000:

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

谢谢迪迪埃的回答,它帮助我走上正轨。您会注意到,Didier的答案中的JSFIDLE在您第一次打开对话框时起作用,但任何进一步的打开和ajax都会导致对话框下方出现blockUI元素。对话框必须重新校准它的z索引,以便在每次打开时成为最上面的狗

我找到了两种可能的解决方法:

  • “”将在对话框关闭时重新创建该对话框,并在 它被打开了
  • 与其阻塞整个UI,不如阻塞 对话这可以通过以下方式实现:

    $( ".selector" ).dialog( "widget" ).block({ 
        theme: false,
        message: '<h1>Wait for me please...</h1>', 
        css: { border: '3px solid #a00' } 
    });
    
    $(“.selector”).dialog(“widget”).block({
    主题:假,
    留言:“请等我……”,
    css:{border:'3px solid#a00'}
    });
    

  • 是的,这就行了!谢谢。演示不起作用,我已经为你添加了代码片段answer@Rishab谢谢你的注意。我已经更新了演示。jquery/blockui脚本因内容混合而被阻止。
    $( ".selector" ).dialog( "widget" ).block({ 
        theme: false,
        message: '<h1>Wait for me please...</h1>', 
        css: { border: '3px solid #a00' } 
    });