Fancybox 对话框点击

Question

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

1. 我无法让 iframe 实现调整其内容大小。
2. 我无法让 ajax 实现在对话框内提交表单。

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

我一直无法找到一种方法来完成这项工作。我并不特别关心我使用哪种实现，但我需要良好的用户体验。有什么想法吗？

Answer 1

您可以使用此处记录的公共方法$.fancybox.resize。

在 FancyBox 内提交表单可以通过不同的方式完成。我个人更喜欢使用 AJAX 提交并使用回调显示结果。 这是一个示例：

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