Estoy publicando un problema y una solución aquí para ayudar a cualquiera que haya experimentado el mismo problema que yo.

tengo un<div> en mi página a la que quería permitirle al usuario 'hacer zoom' haciendo clic en un icono. los<div> no esta oculto

Usé fancybox (Página de inicio de fancyBox) para mostrar el<div> como una especie de ventana modal. La razón por la que usé fancyBox sobre otros complementos de tipo lightbox es que no duplica el contenido de<div>, pero lo mueve, por lo que todos los elementos de forma, etc. continúan trabajando. El problema es que después de cerrar la ventana de fancyBox, el<div> Está oculto en la página principal.

La solución:

Utilicé fancyBox 2.1.2.

Usé una solución publicada por JFKDIAZ en github (https://github.com/fancyapps/fancyBox/issues/103) para asegurarse de que el div fue devuelto a su padre después de cerrar la ventana de fancyBox.

Luego utilicé la funcionalidad jquery show para mostrar el div en línea nuevamente.

Mi código para inicializar la caja de fantasía está abajo. Nota labeforeLoad yafterClose funciones para identificar al padre<div> y devolver el<div> De vuelta a su padre (gracias a JFKDIAZ por esto). Tenga en cuenta la adición de$(inlineTarget).show(); para mostrar el<div> De nuevo para que no desaparezca. El resto es la inicialización estándar de 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'
        });
    });

Mi codigo para el<div> y el enlace para mostrar el<div> en el fancyBox está abajo. Tenga en cuenta que el padre<div> debe tener unid Para que el código pueda reconocerlo. La clasevarious es la etiqueta que utilizo para identificar cuál<a> Elemento al que debo aplicar el fancyBox.

    <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>

Esto me funcionó muy bien. Todos los elementos de formulario se movieron al fancyBox y volvieron a su posición original en la página.

ACTUALIZAR (enlace movido a fiddle de los comentarios) - Para una DEMO vea:http://jsfiddle.net/z8e9q/3/

Espero que esto ayude a alguien que tenga el mismo problema.