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

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

您的代码中有一个错字，在第二个对话框定义中，当应该是“ modal：true ”时，您有“ model ：true ”

$(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
    });
});