Question

我试图在jQuery UI模式对话框中获取一个按钮来关闭自己并打开另一个模态对话框。

问题是打开时第二个对话框将始终打开而没有您希望从模式对话框中看到的屏幕叠加，因此您仍然可以单击模态后面的屏幕。

jQuery如下

$(function () {

    $("#DialogSelectEventType").dialog({
        modal: true,
        autoOpen: true,
        width: 400
    });

    $("#DialogCreateToDo").dialog({
        model: true,
        autoOpen: false,
        width: 450
    });

    $("#btnCreateToDo").click(function (e) {
        $("#DialogSelectEventType").dialog({ close: function (e, ui) {
            $("#DialogCreateToDo").dialog("open");
        }}).dialog("close");
    });


});

我也尝试将处理程序更改为

$("#btnCreateToDo").click(function (e) {
    $("#DialogSelectEventType").dialog("close");
    $("#DialogCreateToDo").dialog("open");
});

哪个没有帮助

以下是jsFiddle

有人可以帮我理解为什么会这样吗？这是一个错误还是我做错了什么？

Answer 1

你的代码中有一个拼写错误，在第二个对话框定义中你有“ model：true ”，当它应该是“ modal：true ”< / p>

$(function () {

    $("#DialogSelectEventType").dialog({
        modal: true,
        autoOpen: true,
        width: 400
    });

    $("#DialogCreateToDo").dialog({
        modal: true,
        autoOpen: false,
        width: 450
    });

    $("#btnCreateToDo").click(function (e) {
        $("#DialogSelectEventType").dialog({ close: function (e, ui) {
            $("#DialogCreateToDo").dialog("open");
        }}).dialog("close");
    });


});

试试这个：http://jsfiddle.net/tzKf7/3/

希望它有所帮助。

Answer 2

将.dialog定义移动到单击处理程序中就可以了。

$("#btnCreateToDo").click(function (e) { 
    $("#DialogCreateToDo").dialog({
        model: true,
        autoOpen: true,
        width: 450
    });
});

jQuery不会正确打开2个连续的模态对话框

2 个答案: