jQuery中的简单模态答案

【问题标题】：Simple modal in jQueryjQuery中的简单模态
【发布时间】：2008-12-27 12:12:05
【问题描述】：

我在 jQuery 中使用 SimpleModal，并且有一个确认对话框。如果结果是Yes，我必须在此对话框中调用my.php。但是，我已经完成了代码，我仍在寻找想法。我该怎么做？

$(document).ready(function () {
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) {
        e.preventDefault();
        // Example of calling the confirm function.
        // You must use a callback function to perform the "yes" action.
        confirm("Continue", function () {
            alert("OK");
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        close:false,
        position: ["20%",],
        overlayId:'confirmModalOverlay',
        containerId:'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);

            // If the user clicks "yes"
            dialog.data.find('.yes').click(function () {
                $.get('my.php', function(data){
                    // Create a modal dialog with the data.
                    // Here: How do I write the same window?
                });

                // Call the callback

                // Close the dialog
                $.modal.close();
            });
        }
    });
}

在这里，我遇到了如何从 Ajax 结果中将其写入同一个窗口 Confirmdialog 的问题。我该怎么做？

【问题讨论】：

标签： jquery ajax popup simplemodal

【解决方案1】：

我不确定确认功能是否最适合您的需求，但这样的事情应该可以工作：

function confirm(message, callback) {
    $('#confirm').modal({
        close:false,
        position: ["20%",],
        overlayId:'confirmModalOverlay',
        containerId:'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);

            // If the user clicks "yes"
            dialog.data.find('.yes').click(function () {
                $.get("my.php", function (data) {
                    /* Sample response:
                     *   <div id="title">my title</div>
                     *   <div id="message">my message</div>
                     *
                     */
                    var resp = $("<div/>").append(data);
                    var title = resp.find("#title").html(),
                        message = resp.find("#message").html();

                    dialog.data.find(".header span").html(title);
                    dialog.data.find(".message").html(message);
                    dialog.data.find(".buttons .yes").hide();
                    dialog.data.find(".buttons .no").html("Close");

                    // No need to call the callback or $.modal.close()
                });
            });
        }
    });
}

【讨论】：

是否可以更改新对话框的尺寸？
你可以这样做： dialog.container.css({height:"800px", width:"600px"});

【解决方案2】：

我不确定您要完成什么 - 您是否尝试重复使用确认模式对话框来显示您的结果？我想你可以这样做，因为你在对话框上有一个“关闭 X”按钮，只需用你的结果替换消息的内容并删除按钮，这样你的回调就不会再次被触发。它可能看起来像这样：

 dialog.data.find('.message').html( 'new contents from your ajax data' );
 dialog,data.find('.buttons').remove();

但是，这对我来说似乎是对模态对话框的滥用。在我看来，对话框应该只包含与用户的单一交互。如果您需要根据初始对话框的结果进行进一步的交互，那么我会考虑添加另一个模式对话框，在当前对话框与 AJAX 结果一起关闭后弹出，或者将 AJAX 结果插入主界面并处理它在那里。

【讨论】：