jQueryUI 模态对话框上的 blockui答案

【问题标题】：blockui over jQueryUI modal dialogjQueryUI 模态对话框上的 blockui
【发布时间】：2012-03-10 08:49:39
【问题描述】：

我无法让 BlockUI 在模式对话框上工作。
我试图处理 z-index 问题，但没有成功...

在我的网页中，这是头部：

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

有什么想法吗？

【问题讨论】：

标签： jquery-ui dialog blockui

【解决方案1】：

您没有指定您使用 z-index 尝试过的内容。

blockUI 插件有一个选项可以更改它创建的消息的 z-index (documentation)：

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

jQuery UI 对话框也是option for specifying a z-index。它的默认值是 1000。所以你必须为 BlockUI 选项设置一个更大的数字，比如 2000：

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

DEMO

【讨论】：

是的，这就是工作！谢谢。
演示不起作用我已经为你的答案添加了sn-p
@Rishab 感谢您的关注。我已经更新了演示。 jquery/blockui 脚本由于内容混合而被阻止。

【解决方案2】：

感谢 Didier 的回答，它帮助我走上了正轨。您会注意到 Didier 的答案中的 jsfiddle 在您第一次打开对话框时有效，但任何进一步的打开和 ajax 都会导致 blockUI 元素出现在对话框下方。对话框每次打开时都必须重新校准它的 z-index 以成为最重要的狗。

我发现了两种可能的解决方法：

'destroy'对话框关闭时重新创建它已打开。

与其阻塞整个 UI，不如阻塞对话。这可以使用widget method 来完成，如下所示：

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

【讨论】：