阻止jQueryUI模态对话框 [英] blockui over jQueryUI modal dialog

问题描述

我不能让BlockUI在模式对话框中工作。

我试图照顾z-index问题，但没有成功...

I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...

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

In my web page, here is the 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>

任何想法？

推荐答案

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

You don't specify what you have tried with z-index.

blockUI插件可以选择更改z-index的z-index消息（文档）：

The blockUI plugin has an option to change the z-index of the message it creates (documentation):

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

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

jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:

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

演示

DEMO

这篇关于阻止jQueryUI模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！