Почему при загрузке содержимого через AJAX окно Fancybox открывается, но сразу же закрывается?

Добрый день. При отправке формы внутри открытого окна Fancybox (по нажатию кнопки) данные отправляются через AJAX. В обработчике success я закрываю текущий экземпляр Fancybox и открываю новое окно с data['html'], но новое окно сразу же закрывается. Привожу код: <br/> <pre><code class="javascript">$("#codereply").on("submit", function(){
  • 15 мая 2026 г. 13:00
Ответы на вопрос 3
Чаще всего причина в том, что вы не останавливаете стандартную отправку формы / всплывающее событие клика, и браузер/событие закрывает текущий Fancybox прежде, чем успевает корректно открыться новый. Типичные симптомы — открыть/закрыть происходит мгновенно.

Что нужно проверить и исправить:

1) Остановите стандартную отправку формы (event.preventDefault()) и всплытие (event.stopPropagation()), либо верните false в конце обработчика submit. Пример:

Для Fancybox + jQuery:
```javascript
$("#codereply").on("submit", function(e){
  e.preventDefault();
  e.stopPropagation();

  var $form = $(this);
  $.ajax({
    url: $form.attr("action"),
    type: $form.attr("method"),
    data: $form.serialize(),
    success: function(data){
      // сначала закрываем старое окно
      $.fancybox.close();

      // и открываем новое: указываем тип 'html', иначе fancybox может пытаться трактовать строку как селектор
      $.fancybox.open({
        src  : data.html,
        type : 'html'
      });
    }
  });

  return false; // дополнительная страховка
});
```

2) Если открытие нового окна сразу после close всё равно закрывается (гонка событий), откройте новое окно после маленькой задержки или в колбэке afterClose:

Вариант с setTimeout:
```javascript
$.fancybox.close();
setTimeout(function(){
  $.fancybox.open({ src: data.html, type: 'html' });
}, 50);
```

Или через колбэк (Fancybox v2/v3 отличаются по API — для v2 используйте afterClose в опциях):
```javascript
$.fancybox.close(true); // или просто close
$(document).one('afterClose.fb', function(){
  $.fancybox.open({ src: data.html, type: 'html' });
});
```

3) Убедитесь, что вы передаёте правильный формат в $.fancybox.open:
- Если передаёте HTML-строку — укажите type: 'html'.
- Для Fancybox 2/3 API немного различается — используйте документацию вашей версии.

Если после этих правок проблема остаётся, приложите ваш полный код обработчика submit и вызовов fancybox (и версию Fancybox), тогда я помогу точнее.
Проблема, с которой вы столкнулись, связана с тем, что новое окно fancybox открывается и сразу закрывается. Это может происходить по нескольким причинам: <br/> 1. Цикл закрытия: в вашем коде после открытия нового окна вы вызываете instance.close(), что может приводить к тому, что новое окно закрывается сразу после открытия. Убедитесь, что вы не вызываете закрытие окна в success до его полного открытия. Если уж не получится, то пункт 2. <br/> 2. Обработка событий: возможно, событие afterClose срабатывает не так, как вы ожидаете. Проверьте, не происходит ли что-то, что может вызывать закрытие окна сразу после его открытия. <br/> Поэтому как вариант, предложу следующее: <br/> - Попробуйте убрать вызов instance.close() из success и посмотрите, будет ли новое окно открываться корректно. <br/> - Добавьте логирование в success, чтобы убедиться, что данные возвращаются корректно. <br/> - Проверьте, нет ли других обработчиков событий, которые могут влиять на поведение fancybox. <br/> Если проблема не решится, попробуйте предоставить больше информации о том, как именно вы открываете новое окно и какие данные возвращаются с сервера, ну или в личку напишите.
анимация закрытия ещё идёт, а ты уже открываешь новый — он и гасится вместе с ней. <br/> <br/> убери <code>instance.close()</code> и добавь <code>closeExisting: true</code> : <br/> <pre><code>$.fancybox.open(data['html'], {
    closeExisting: true,
    afterClose: function() { location.reload(); }
});</code></pre> <br/> <br/> fancybox сам разберётся с очерёдностью.
Похожие вопросы