Question

我有一个页面，用户可以从中提交请求报价的简短表格。我不想丢失页面上下文，所以我想在对话框窗口中打开该表单并允许它们从那里提交。所有这些都有效，但我遇到了iframe和ajax实现的问题。具体做法是：

我无法将iframe实现调整为其内容。
我无法通过ajax实现在对话框中提交表单。

提交表单时，我希望对话框保持打开状态，以便我可以为用户显示任何表单错误或感谢/成功消息。然后他们就可以重新提交或关闭对话框。

我无法找到一种方法来完成这项工作。我并不特别在意我使用哪种实现，但我需要用户体验才能体面。有什么想法吗？

Answer 1

您可以使用公开方法$.fancybox.resize，记录here。

在FancyBox中提交表单可以通过不同方式完成。我个人更喜欢做AJAX提交并使用回调显示结果。 Here's an example：

$(function(){
    var form = '\
    <form action="/" method="post">\
        <label>\
            Enter something:<br>\
           <input type="text" name="textbox" />\
        </label>\
        <input type="submit" value="OK" />\
    </form>';

    $.fancybox({
        content: form,
        onComplete: function(){

            $.fancybox.resize(); // Not needed, just for demo

            $('#fancybox-content form').submit(function(){
                $.ajax({
                    url: 'http://fiddle.jshell.net/echo/jsonp/',
                    type: 'json',
                    success: function(d){

                        // The "d" object here would be populated

                        $.fancybox({
                            content: 'Thanks for submitting!'
                        });
                    }
                });

                return false;
            });
        }
    });
});

Fancybox对话框点击

1 个答案: