Zamieszczam tutaj problem i rozwiązanie, aby pomóc każdemu, kto doświadczył tego samego problemu co ja.

mam<div> na mojej stronie, którą chciałem zezwolić użytkownikowi na „powiększenie”, klikając ikonę. The<div> nie jest ukryty.

Użyłem fancyBox (strona domowa fancyBox), aby wyświetlić<div> jako rodzaj modalnego okna. Powodem, dla którego użyłem fancyBox nad innymi wtyczkami typu lightbox, jest to, że nie powiela on zawartości<div>, ale porusza się, więc wszystkie elementy formy itp. nadal działają. Problem polega na tym, że po zamknięciu okna fancyBox<div> jest ukryty na stronie głównej.

Rozwiązanie:

Użyłem fancyBox 2.1.2.

Użyłem rozwiązania opublikowanego przez JFKDIAZ na github (https://github.com/fancyapps/fancyBox/issues/103), aby upewnić się, że div został zwrócony rodzicowi po zamknięciu okna fancyBox.

Następnie użyłem funkcji pokazu jquery, aby ponownie wyświetlić linię inline.

Mój kod do zainicjowania eleganckiego pudełka znajduje się poniżej. ZanotujbeforeLoad iafterClose funkcje identyfikacji rodzica<div> i zwróć<div> z powrotem do swojego rodzica (dzięki za to JFKDIAZ). Zwróć uwagę na dodanie$(inlineTarget).show(); aby wyświetlić<div> ponownie, aby nie zniknął. Pozostała część to standardowa inicjalizacja dla fancyBox.

        $(document).ready(function() {
        $(".various").fancybox({
            beforeLoad: function() {
                inlineTarget = this.href;
                parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                $(inlineTarget).parent(parentNodename).addClass("returnTo");
            },
            afterClose: function() {
                $(inlineTarget).appendTo(".returnTo");
                $(".returnTo").removeClass("returnTo");
                $(inlineTarget).show();
            },
            maxWidth: 880,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });

Mój kod dla<div> i link do wyświetlenia<div> w fancyBox jest poniżej. Zauważ, że rodzic<div> musi miećid aby kod mógł go rozpoznać. Klasavarious to tag, którego używam do identyfikacji, który<a> element muszę zastosować fancyBox do.

    <a href="#application_form" class="various">Zoom</a>
    <div id="application_parent">
        <div id="application_form">
            Contents to display in fancyBox and return back here when complete.
        </div>
    </div>

To działało dla mnie bardzo dobrze. Wszystkie elementy formularza zostały przeniesione do fancyBox i powróciły do ​​pierwotnej pozycji na stronie.

AKTUALIZACJA (przeniesiono link do gry z komentarzy) - Aby uzyskać DEMO, zobacz:http://jsfiddle.net/z8e9q/3/

Mam nadzieję, że to pomoże komuś, kto ma ten sam problem.