Question

我很难用JQM的新Alpha版本显示嵌套弹出窗口。例如，我正在显示用户应该填写的弹出窗体，如果服务器端验证失败，我想显示错误弹出窗口。我发现错误弹出窗口没有显示。我怀疑它显示在原始弹出窗口下方。

function bindSongWriterInvite() {

    // Bind the click event of the invite button
    $("#invite-songwriter").click(function () {
        $("#songwriter-invite-popup").popup("open");
    });

    // Bind the invitation click event of the invite modal
    $("#songwriter-invite-invite").click(function () {
        if ($('#songwriter-invite').valid()) {
            $('#songwriter-invite-popup').popup('close');
            $.ajax({
                type: 'POST',
                async: true,
                url: '/songwriter/jsoncreate',
                data: $('#songwriter-invite').serialize() + "&songName=" + $("#Song_Title").val(),
                success: function (response) {
                    if (response.state != "success") {
                        alert("Should be showing error dialog");
                        mobileBindErrorDialog(response.message);
                    }
                    else {
                        mobileBindErrorDialog("Success!");
                    }
                },
                failure: function () {
                    mobileBindErrorDialog("Failure!");
                },
                dataType: 'json'
            });
        }
    });

    // Bind the cancel click event of the invite modal
    $("#songwriter-invite-cancel").click(function () {
        $("#songwriter-invite-popup").popup("close");
    });
}

function mobileBindErrorDialog(errorMessage) {
    // Close all open popups.  This is a work around as the JQM Alpha does not
    // open new popups in front of all other popups.
    var error = $("<div></div>").append("<p>" + errorMessage + "</p>")
                                .popup();
    $(error).popup("open");
}

因此，您可以看到我尝试显示错误对话框，无论ajax帖子是成功还是失败。它永远不会出现。

有人有任何想法吗？

麦克

Answer 1

我找到了解决方案！

我在bindErrorPopup函数上设置了一个延迟，等待弹出关闭动画完成。

function mobileBindErrorDialog(errorMessage, delay) {
    var error = $("<div></div>").attr({
        'data-rel': "popup",
        'data-theme': "a"
    });

    $(error).append("<p>" + errorMessage + "</p>")
            .popup({
                overlayTheme: "a",
                positionTo: "window",
                theme: "a"
            });

    setTimeout(function () {
        $(error).popup("open");
    }, delay);
}

工作真棒！

JQM嵌套弹出窗口

1 个答案: