Диалоговое окно 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;
            });
        }
    });
});