jquery - jquery UI 对话框在父 UI 对话框后面打开

Question

我有一个 jquery UI 对话框（使用 ajax 打开）。在那个对话框上，我有一些内容和一个打开（再次使用 ajax）另一个 ui 对话框的按钮。

首次按下按钮会很好地打开第二个对话框。如果我关闭第二个对话框并再次按下按钮，对话框将打开，但它隐藏在第一个对话框后面。

我可以在 jquery 中做些什么来强制该对话框聚焦吗？我永远不会希望它位于那个原始窗口的后面。

代码：

第一个对话框的代码...

$('#searchUsers').autocomplete({
    source: "/gpcadmin/Roles/Lookup",
    minLength: 0,
    focus: function (event, ui) {
        $('#searchUsers').val(ui.item.label);

        return false;
    },
    select: function (event, ui) {
        var id = ui.item.value;
        $.ajax({           
            url: "/gpcadmin/Users/UserDashboard/" + id,
            type: "GET",
            success: function (data) {
                $("#my-dialog2").html(data);
                $('#my-dialog2').dialog({
                    modal: true,
                    width: "1200px",
                    height: 700,
                    close: function (event, ui) {
                        $("#my-dialog2").dialog("close");
                    }
                });
            },
            error: function (data) {
            }
        });

        return false;
    }

第一个对话框上用于调用第二个对话框的代码：

$("#quickButton1").on("click", function (e) {
    e.preventDefault();
    $.ajax({
        url: "/gpcadmin/Roles/cardOfficersui/" + $(this).data("task-id"),
        type: "GET",
        success: function (data) {
            $("#my-dialog23").html(data);
            $('#my-dialog23').dialog({
                modal: true,
                width: "600px",
                height: 400,
                close: function (event, ui) {

                }
            });
        },
        error: function (data) {
        }
    });
});

Answer 1

您可以使用不同的 z 索引。例如：

$('#my-dialog23').dialog({
            modal: true,
            width: "600px",
            height: 400,
            close: function (event, ui) {

            },
            zIndex:500
        });


$('#my-dialog2').dialog({
                    modal: true,
                    width: "1200px",
                    height: 700,
                    close: function (event, ui) {
                        $("#my-dialog2").dialog("close");
                    },
                     zIndex:501
                });