31

我不能让 BlockUI 在模态对话框上工作。
我试图照顾 z-index 问题，但没有成功......

在我的网页中，这里是 head ：

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

任何的想法？

4

2 回答 2

52

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

blockUI 插件有一个选项可以更改它创建的消息的 z-index（文档）：

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

jQuery UI 对话框也可以作为指定 z-index 的选项。它的默认值是 1000。所以你必须为 BlockUI 选项设置一个更高的数字，比如 2000：

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

演示

于 2012-02-21T11:31:08.523 回答
4

Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.

I've found two possible ways around this:

  1. 'destroy' the dialog when it is closed and recreate it when it is opened.

  2. rather than blocking the whole UI, just block the dialog. This can be done using the widget method, like this:

    $( ".selector" ).dialog( "widget" ).block({ 
    theme: false,
    message: '<h1>Wait for me please...</h1>', 
    css: { border: '3px solid #a00' } 
});
于 2013-02-26T01:26:43.440 回答