Как связать несколько необычных коробок jquery?

Question

Я использую fancybox для модалов в своем веб-приложении.

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

Опять же, я использую jquery и fancybox в своем приложении.

Answer 1

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

Редакция: В обсуждении есть хороший пример, предоставленный https://stackoverflow.com/users/139396/o-k-w

Я поместил пример на jsfiddle: http://jsfiddle.net/CkK8N/

Answer 2

Я только что решил эту проблему сам.

Сценарий:

• Запуск одного fancybox с использованием iframe
• Из открытого fancybox откройте другой fancybox с контентом, доставленным веб-службой ajax.

Ключевые моменты

• Если вы используете fancybox и iframes, вам нужно использовать parent. $. Fancybox, в противном случае подойдет $ .fancybox.
• Не забудьте показатьактивность перед загрузкой контента
• Не забудьте изменить размер после загрузки контента

Фрагмент кода:

        if (parent) {
        // if in an iframe we need to show activity for the parents' fancybox
        parent.$.fancybox.showActivity();
    }
    else {
        // otherwise show activity for the fancybox of the current window
        $.fancybox.showActivity();
    }       

            // I'm using Ajax to fetch the content but you can fetch it in other ways too
    $.ajax({
        url: "your url goes here",
        type: "POST",
        contenttype: "text/xml; charset=utf-8",
        dataType: "xml",
        data: { "name": "john"},
        success: function (data, textStatus, jqXHR) {

            if (parent) {                   
                // if in an iframe we need to push the content into the parents' fancybox
                parent.$.fancybox($(jqXHR.responseXML).text());
                parent.$.fancybox.resize();
            }
            else {
                // otherwise push the content into the fancybox of the current window
                $.fancybox($(jqXHR.responseXML).text());
                $.fancybox.resize();
            }

        }
    });