Автоматическое закрытие окна FancyBox
 

Есть форма обратной связи в модальном окне FancyBox.
Нужно сделать что бы после успешной отправки заявки это модальное окно закрывалось автоматически. Я сделал закрытие через setTimeout. Но окно закрываться при нажатии на кнопку Отправить вне зависимости от того отправилась форма или нет.
Помогите пожалуйста исправить.

<script>
$(document).ready(function(){
            /*ПРОВЕРЯЕМ НАЖАТА ЛИ КНОПКА ОТПРАВКИ*/
            $('#btn_submit').click(function(){
                // собираем данные с формы
                var user_name    = $('#name').val();
                var user_email   = $('#email').val();
                var user_phone = $('#phone').val();
                var text_comment = $('#text_comment').val();
                // отправляем данные
                $.ajax({
                    url: "/php/send.php", // куда отправляем
                    type: "post", // метод передачи
                    data: { // что отправляем
                        "name":    user_name,
                        "email":   user_email,
                        "phone":   user_phone,
                        "text_comment": text_comment
                    },
                    error:function(){$("#erconts").html("Произошла ошибка!");},
                    /* если произойдет ошибка в элементе с id erconts выведится сообщение*/
                    beforeSend: function() {
                        $("#erconts").html("Отправляем данные...");
                    },
                    success: function(result){
                        /* В случае удачной обработки и отправки выполнится следующий код*/
                        $('#erconts').html(result);
                           setTimeout($.fancybox.close(), 2000);
                        console.log("ntcn");
                        
                    }
                });
            });
        });
</script>

уберите скобки

Убрал скобки, но теперь модальное окно не закрывается совсем. В независимости от того отправлена заявка или нет.Получилось так:

setTimeout($.fancybox.close, 2000);

По этому адресу "/php/send.php" написать sleep(5);, через 5 секунд будет закрыто, и просто так: $.fancybox.close.

maxg5,
может так повезёт :)

setTimeout(function() {
  $.fancybox.close()
}, 2000);

рони, да у него скорее ответ приходит практически сразу, поэтому и кажется.

Так окно так же не закрывается плюс к этому идет задержка на отправку в количестве секунд указанных в sleep(). Возможно я что то не так оформил.

<?php
    /*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
    $name = $_POST["name"];
    $email = $_POST["email"];
    $phone = $_POST["phone"];
    $text_comment = $_POST["text_comment"];

    /*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
    if($name=="" or $email=="" or $phone=="" or $text_comment==""){
        echo "Заполните все поля";
    }

    else{
        /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
        $to = "maxg5@yandex.ru"; /* Адрес, куда отправляем письма*/
        $subject = "Письмо с обратной связи"; /*Тема письма*/
        $headers = "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n";
        $headers .= "From: <test@mail.ru>\r\n";/*ОТ КОГО*/

        /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
        $message .= "Имя пользователя: ".$name."\n";
        $message .= "Почта: ".$email."\n";
        $message .= "Телефон: ".$phone."\n";
        $message .= "Сообщение: ".$text_comment."\n";

        /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/

        $send = mail($to, $subject, $message, $headers);

        /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
        if ($send == "true")
        {
            echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n";
        }
        /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
        else
        {
            echo "Не удалось отправить, попробуйте снова!";
        }
    }
sleep(3);
    ?>
<script type="text/javscript">
$.fancybox.close
</script>

setTimeout(function() {
  $.fancybox.close()
}, 2000);

Так окно закрывается в независимости от того отправилась форма или нет.

Я предполагал, что ответ сразу приходит ибо "Но окно закрываться при нажатии на кнопку Отправить", поэтому и можно проверить задержкой на сервере. А теперь что не закрывается - "Так окно так же не закрывается"?

И если мне не изменяет память, то у FancyBox есть свой метод Ajax.

Как это реализовать? Можно пожалуйста пример кода.

Почитать API FancyBox, а я не заучиваю все что мне попадается наизусть. )

maxg5, я могу и ошибаться, так что лучше глянуть API, но содержимое его можно подгружать ajax запросом, типа

$('селектор').fancybox({
        type: 'ajax',
        ajax : {
            type    : "POST",
            data    : данные
        }           
});

Загрузив таким образом форму, после отправления которой, закрыть окно, к которому доступ проще будет.

С API FancyBox я не разберусь.
Можете дать пример кода пожалуйста на модальное c формой бех без использования FancyBox.
Мне нужно в обще две формы сделать.
1. Форма в модальном окне. Что бы окно зарвалось после успешной отправки.
2. И форма после отправки которой модальное окно появляется через 3с и исчезает.

Ищу примеры, не могу найти.

Чуть позже, запущу сервер, проверю, ибо надо вспомнить что там у него.

А это как понять?

Опечатка была:
форма после отправки которой модальное окно появляется НА 3 секунды и исчезает

1) Формы уже на страницах, но помещаются в окно?
2) Если после отправления формы, должно появится окно на N сек, то форма также из окна отправляется, а окно после отправки, это сообщение результата отправления?

1. Первая форма появляется в модальном окне по нажатию на кнопку. Вторая форма расположена на самой старание(Не в модальном окне). Выходит Вторая форма на странице. А Перовой форме задано display:none;. (Т.к. она появляется в модальном окне).
2. окно на N секунд должно появляться только для второй формы. Окно после отправки, это сообщение результата отправления формы.

<?
if($_POST) {
    if(isset($_POST['sleep'])) sleep(3);
    exit(print_r($_POST, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".modalbox").fancybox({						
        padding: 20,
        frameWidth: 400,
        frameHeight: 300,
        overlayOpacity: 0.7					
    });
    
    $('#feedback').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                $('pre').text(d);
                $.fancybox.close(); //закрывается только после ответа
            }
        })    
    });
    
    $('#feed_message').submit(function(e) {
        var f = $(this);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: location,
            data: f.serialize(),
            success: function(d) {
                //показать сообщение
                $.fancybox.open({
                    content: '<p>Done!</p>',
                    afterShow: function() {
                            $(this.skin[0]).find('a.fancybox-close').hide(); 
                            var tm = setTimeout(function() {
                                 //скрыть сообщение
                                 $.fancybox.close();
                                 clearTimeout(tm)        
                            }, 3000)
                    }
	            })
            }
        })    
    });
});
</script>
</head>
<body>
<div>
	<p><a href="#feedback" class="modalbox">Sender</a></p>
    <div style="display: none;">
        <h2>Send form</h2>
        <form id="feedback">
            <input name="name" value="as"><br>
            <input name="email" value="as@as.as"><br>
            <input type="hidden" name="sleep" value="1" />
            <button>Send</button>
        </form>
    </div>
</div>

<pre>
</pre>

<div>
	<p>Message</p>
    <form id="feed_message">
        <input name="name" value="as"><br>
        <input name="email" value="as@as.as"><br>
        <button>Send</button>
    </form>
</div>
</body>
</html>

Спрятать кнопку close можно опционально (только опция closeBtn у другой версии может отличаться, то есть ее имя), и если сообщение формирует сервер, значит его определять в опциях:

success: function(data) {
    $.fancybox.open({
        content: data,
        afterShow: function() {
            var tm = setTimeout(function() {
                    $.fancybox.close();
                    clearTimeout(tm)        
                }, 3000)
        },
        closeBtn: false //или modal: true, должна скрываться по определению во всех версиях
    })
}

Спасибо!
Применил Ваш код к своему сайту. Но у меня почему то в модальном окне, при нажатии на кнопку Отправить окно закрывается и все. Должно выдаться сообщение в этом же модальном окне(Где нибудь под кнопкой отправить) Ваша заявка отправлена. И через 3 секунды окно закрыться должно.
php добавил тот что я выше показывал.
В чем может быть проблема? Вот сайт. Модальное окно прикручено к кнопке Онлайн заявка только в шапке под номером которая.

Один в один не надо, это пример, а у вас должны быть все обработчики - ошибок запроса и прочее, к тому же не мешало бы на время запроса делать недоступной кнопку submit.

Ну все правильно, в success что делается? А вот что:

$('pre').text(d); //ответ помещаем в ...
f.closest('.fancybox-skin').find('a').trigger('click') //закрываем окно

Кстати, можно закрыть и так $.fancybox.close(), никаких других открытий одновременно у вас не видно.

А судя по ответу, сервер не дурак, что хорошо, проверяет данные пришедшие, и если обязательно поле пустое, то возвращает сообщение. Вот только плохо, что это обычный текст, так что не понять, то-ли были ошибки приема, то-ли все Ок. Для диалога удобнее json-формат, вот тогда закрывать окно нужно только если север не вернул ошибок.

Получается мне нужно обработчики дописать? Это в php писать как я понимаю?
По итогу получается нужно мой PHP подправить под Ваш код?

Прервали меня, отправил автоматом, но не все.

Если нужно чтобы и по отправлению и первой формы (та что в окне), после отправки вывести сообщение об успешной ее приемке, а потом закрыть окно спустя время, то нужно не новое окно открывать, а использовать это же, заменив его контент (форму) на сообщение. Ну и закрыть по таймеру.

Не только обработчик, но и серверный код, он должен возвращать json, например, если в нем будет свойcтво error, то вывести это сообщение. Куда вывести, это уже дело хозяйское, можно в форму добавить скрытый элемент, в который помещать ошибку и показывать его, можно детализировать какие конкретно поля не заполнены и показывать всплывающие сообщения возле них, и т.д., и т.п.

А вообще, добавьте обязательным полям атрибут required и все браузеры поддерживающие его не позволят отправлять форму с незаполненными такими полями. А те что не поддерживают получат ошибку от сервера.

В общем нужно не просто жмахнул и отправил форму, а писать диалог клиент-сервер.