Закрыть окно fancybox после успешного выполнения

@PeterLS · Регистрация: 24.11.2012

Студворк — интернет-сервис помощи студентам

Подскажите как сделать? У меня есть форма обратной связи - всплывающее модальное окно, реализованное с помощью fancybox. Данные из этого окна отправляются через ajax. Как сделать чтобы после успешной отправки модальное окно закрылось и всплыло сообщение об успешной отправке?
Сейчас у меня так:
Кусок кода из ajax:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
            function formSubmit(){
                var $this=$(this)
                    ,modal=$('.'+opt.responseMessageClass)
                    ,responseMessage
 
                modal.on('hidden.bs.modal',function(){
                    if(responseMessage!=='success')
                        $('#recaptcha_reload',form).click()
                        ,$('#recaptcha_response_field',form).focus()                        
                })
 
                $('[data-constraints]',form).trigger('validate.form')
 
                if($('#recaptcha_response_field',form).val()==='')
                    $('label.recaptcha',form).addClass(opt.emptyClass)
                
                if(!$('label.'+opt.invalidClass+',label.'+opt.emptyClass,form).length&&!form.hasClass(opt.processingClass)){
                    form.addClass(opt.processingClass)
                    $this.ajaxSubmit(function(e,d,a,c){
                        responseMessage=e
                        if(e=='success'){
                            
                            form
                                .removeClass(opt.processingClass)
                                .addClass(opt.successClass)
                            $.fancybox.close();
                            modal.find('.modal-title').text('Успех!')
                            modal.find('.modal-body').text('Успешно отправлено!')
 
                            setTimeout(function(){
                                form
                                .removeClass(opt.successClass)
                                .trigger('reset')
                            },opt.successShowDelay)
                        }else{                          
                            modal.find('.modal-title').text('Ошибка!')
                            modal.find('.modal-body').html(e)
 
                            form
                                .removeClass(opt.processingClass)
                                .addClass(opt.responseErrorClass)
 
                            $('#recaptcha_response_field',form).val('')
 
                            setTimeout(function(){
                                form
                                    .removeClass(opt.responseErrorClass)
                                    //.trigger('reset')                             
                            },opt.successShowDelay)
                        }
                        modal.modal({keyboard:true})                        
                    })              
                }               
                return false
            }

Код php:

PHP
1
2
3
4
5
6
7
8
9
10
11
$name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $text = $_POST['message'];
    
    $recepient = "reiterav@gmail.com";
    $sitename = "СпортЦех";
    
    $pagetitle = "Новая заявка с сайта \"$sitename\"";
    $message = "Имя: $name \nЕмайл: $email \n Телефон: $phone \nСообщение: $text";
    mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

Сейчас у меня не происходит ничего, хотя сообщение и отправляется!

Добавлено через 55 секунд
Почему в ajax не работает $.fancybox.close();, а через консоль работает? Почему не выполняет?

@Roserio · 18.08.2015, 02:32

$.fn.fancybox.close(); попробуйте

@PeterLS · 19.08.2015, 08:40 **[ТС]**

Roserio, нет, все равно не работает. Если что, то структура файловая у меня такая:
index.php
-script.js
--tmform.js (ajax обработка формы)
--fancybox.js (подключение fancybox)

Скину дополнительно как подключается fancybox:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function ($) {
    var o = $('.thumb');
    var img = $('.fan');
    if (o.length > 0) {
        include('js/jquery.fancybox.js');
        include('js/jquery.fancybox-media.js');
        $(document).ready(function () {
            o.fancybox();
            img.fancybox({
                width: 420,
            });
        });
    }
})(jQuery);

Добавлено через 7 часов 50 минут
Это до сих пор актуально, подскажите, пожалуйста!

Добавлено через 14 часов 57 минут
Если не совсем понятен вопрос - задайте вопросы, я постараюсь ответить!

@Roserio · 19.08.2015, 08:54

JavaScript
1
parent.$.fancybox.close()

Добавлено через 4 минуты
И вот вам
http://xiper.net/collect/js-pl... y/fancybox

Добавлено через 34 секунды
И вот еще офф сайт
http://fancybox.net/api

@PeterLS · 19.08.2015, 09:03 **[ТС]**

Roserio, да всё равно не закрывает!

Получается наплыв одного окна на другое!...

@PeterLS · 19.08.2015, 09:05 **[ТС]**

Roserio, заработало. Я отправил ответ "Успех" в ajax и все заработало! Спасибо.

@Roserio · 19.08.2015, 09:07

Рад что получилось.
ajax { } Ajax options Note: 'error' and 'success' will be overwritten by FancyBox

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Roserio 16 / 16 / 13 Регистрация: 06.08.2015 Сообщений: 61
	18.08.2015, 02:32
	$.fn.fancybox.close(); попробуйте 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	19.08.2015, 09:03 [ТС]
	Roserio, да всё равно не закрывает! Получается наплыв одного окна на другое!... Миниатюры 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	19.08.2015, 09:05 [ТС]
	Roserio, заработало. Я отправил ответ "Успех" в ajax и все заработало! Спасибо. 0

@Roserio 16 / 16 / 13 Регистрация: 06.08.2015 Сообщений: 61
	19.08.2015, 09:07
	Рад что получилось. ajax { } Ajax options Note: 'error' and 'success' will be overwritten by FancyBox 0

Закрыть окно fancybox после успешного выполнения

Решение