Открытие второго подарочного ящика В другом подарочном ящике!

Question

Эй! У меня проблемы с моими причудливыми коробками!

Я запускаю форму в fancybox. Обычно он открывается программой fancybox в режиме iframe (поскольку он запускается как виджет из других доменов) . В этом iframe я открываю второй fancybox для отображения ошибок валидации. Все это - хорошо работает.

Но , если пользователь просматривает URL-адрес формы - мне нужно, чтобы форма отображалась в поле ввода, которое вызывает форму с типом: inline. Здесь второй fancybox выходит из строя, вместо того, чтобы выскочить из родительского fancybox, он заменяет его - и моя форма исчезает.

Итак ... как запустить несколько экземпляров fancybox?

Answer 1

Плохая новость в том, что fancybox - это скрипт для одного экземпляра. При загрузке страницы он создает все оверлейные DIV. Все ссылки и другие элементы, связанные с fancybox, будут просто повторно использовать эти наложения. Создание fancybox для обработки нескольких экземпляров потребует более или менее большой перезаписи скрипта.

Answer 2

Я добился этого, используя afterClose и заново открыв мой предыдущий fancybox

   $('#modal-2-button').fancybox({
    afterClose: function () {
        $.fancybox($('#modal-1-button'), { maxWidth: 810 });
    }
});

Это срабатывает, когда вы закрываете модальное 2 и снова открывает модальное 1.

Answer 3

С точки зрения юзабилити и дизайна вы никогда не должны пытаться делать это, поскольку это верный способ создания ужасного пользовательского опыта. Вот почему большинство модальных коробочных фреймворков не поддерживают его.

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

Answer 4

Этого можно достичь, открыв первый fancybox с помощью iframe:

//popup product details in product list
$('.AT3PLPopUpButton').click(function (event) {
    event.preventDefault();
    var target = $(event.target);
    var elAT3Product = $(target.closest(".AT3Product"));
    var productId = elAT3Product.attr('data-productid');
    $.fancybox({
        width: '80%',
        height: '80%',
        href: '/desktopmodules/atena3/productdetails.aspx?productid=' + productId,
        type: 'iframe',
        openEffect  : 'none',
        closeEffect: 'none',
        autosize    : true
    });
});

Answer 5

Мне удалось сделать это с помощью обратного вызова beforeClose.

По сути, перед закрытием окна установите функцию тайм-аута, чтобы открыть другое окно и вернуть false в обратном вызове, чтобы Fancybox не могзакрытие окна.

$.fancybox( $secondWindow, {
  beforeClose : function() {
    // Set timeout to open the other Fancybox window.
    setTimeout(function() {
      $.fancybox( $firstWindow );
    }, 10);

    // Return false to prevent the Fancybox from closing.
    return false;
  }
});