javascript - cargar - Cajas JQuery Modal y Iframe

cargar iframe jquery

Question

He estado usando Simple Modal y siento que no está a la altura de lo que necesito en este momento.

¿Hay un cuadro modal que admita la carga de archivos externos y permite que esos archivos externos cierren el cuadro modal y redirijan la página principal a alguna url?

Un ejemplo de lo que quiero hacer. Tiene una lista de usuarios, puede hacer clic en "Agregar usuario" y un cuadro modal con el formulario emergente, rellenarlo y enviarlo. Eso cerraría la caja y volvería a cargar la página de la lista de usuarios para que pueda ver al usuario en la lista.

Luego, podría hacer clic en "Editar usuario" y se abriría un cuadro modal con la información del usuario completada en los campos del formulario y podría editar, enviar y se cerraría y actualizaría.

Sé que esto se puede hacer si tengo el formulario de información del usuario como un div oculto para cada usuario, pero esto no se escalará bien y se trata de una gran cantidad de datos generales.

Encontré un código sobre esto en Google Code pero simplemente no puedo hacerlo funcionar (posiblemente una versión modal simple diferente)

Estoy dispuesto a cambiar a otra herramienta de caja modal también.

ACTUALIZAR:

¿Se puede cerrar la compatibilidad entre Thickbox o Fancybox desde un elemento IFrame secundario?

Answer 1

¿Has probado ThickBox ?

Answer 2

He encontrado la solución para mí, está usando nyroModal. Admite iframes y cierre del modal a través de su hijo iframe con este código.

parent.$.nyroModalRemove();

Voy a aceptar la respuesta de Russ Cam para darle más representante ya que su respuesta me hizo pensar mucho sobre cómo va a funcionar esto y finalmente me hizo encontrar la respuesta.

Answer 3

Fancybox es también otra opción. Funciona de manera similar a Thickbox

EDITAR:

Después de algunos juegos, parece que el complemento no admite de forma nativa el cierre de Fancybox a través de un elemento iframe hijo. Creo que esto se puede lograr con un poco de esfuerzo (comencé a hackear algo aquí , aunque hago hincapié en que esto era simplemente un POC y no funciona, ya que el botón dentro del iframe elimina la envoltura div de fancybox del DOM y por lo tanto no mostrar cuando haces clic en la imagen de google nuevamente). Sin embargo, me pregunto si un iframe es correcto para bajar.

Para agregar un usuario, pensé que podría presentar al usuario un formulario modal como el que se encuentra en el sitio de Monster al hacer clic en "Iniciar sesión". Una vez que haga clic en Agregar usuario, haga una llamada AJAX a su fuente de datos para insertar un nuevo usuario y luego, al volver al éxito, puede iniciar una actualización de página o usar AJAX para actualizar la lista.

Para editar un usuario, una vez que se selecciona a un usuario, puede realizar una llamada AJAX con una identificación de usuario para rellenar un formulario modal con los detalles del usuario recuperados de su fuente de datos cuando la llamada AJAX devuelve éxito. Una vez que haya terminado de editar al usuario, realice una llamada AJAX para actualizar su fuente de datos y, nuevamente, inicie una actualización de página o use AJAX para actualizar la lista.

En lugar de la actualización de la página o la llamada final a AJAX en cada escenario, simplemente puede usar JavaScript / jQuery para actualizar los detalles de la lista / lista, dependiendo de si un usuario ha sido agregado o editado, respectivamente.

Answer 4

A continuación se muestra una interacción de diálogo básico cargando contenido en un iFrame y luego cerrando el diálogo desde el iFrame.

Tenga en cuenta que para ilustrar esto tengo dos fragmentos de código. El primero está etiquetado file1.html. El segundo debe nombrar "myPage.html" si desea que funcione y colocarlo en el mismo directorio que el primer archivo.

Tenga en cuenta que la llamada para cerrar el cuadro de diálogo se puede usar de otras formas dependiendo de la funcionalidad que desee. Por ejemplo, otro ejemplo podría ser el envío exitoso de formularios.

Cree los archivos localmente en su sistema y abra file1.html y pruébelo.

archivo1.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#modalDiv").dialog({
                modal: true,
                autoOpen: false,
                height: ''180'',
                width: ''320'',
                draggable: true,
                resizeable: true,   
                title: ''IFrame Modal Dialog''
            });
            $(''#goToMyPage'').click(
                function() {
                    url = ''myPage.html'';
                    $("#modalDiv").dialog("open");
                    $("#modalIFrame").attr(''src'',url);
                    return false;
            });                 
      });
    </script>
    </head>
    <body>
        <a id="goToMyPage" href="#">Go to My Page</a>
        <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
    </body>
</html>

myPage.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            $(''#clickToClose'').click(
                function() {
                    window.parent.$("#modalDiv").dialog(''close'');
                    return false;
            });
            // uncomment and use the below line close when document is ready (no click action by user needed)
            // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
            // window.parent.$("#modalDiv").dialog(''close'');                    
        });
    </script>
    </head>
    <body>
        <a id="clickToClose" href="#">Click to close.</a>
    </body>
</html>

Answer 5

My FrameDialog permitirá esto, básicamente se extiende en el Diálogo ... si está usando el mismo dominio, debería poder llamar a $ .FrameDialog.close (), sin embargo, si está redirigiendo, simplemente puede redireccionar el padre. window.parent.location hará.

http://plugins.jquery.com/project/jquery-framedialog

Answer 6

HI, Cualquiera que tenga problemas para cerrar un iFrame de Fancy Box usando una instalación manual de Fancy Box en Wordpress 3.0:

Use este enlace en su iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

Funciona :)

Answer 7

este es el script de diálogo cuando tracé con firebug

<iframe> 
       scrolling="auto" 
       height="100%" 
       frameborder="0" 
       width="100%" 
       title="Dialog Title" 
       marginheight="0" 
       marginwidth="0" 
       id="modalIFrame"
       src="test.php" 
</iframe>

Necesito cambiar la altura al 95%, porque el desplazamiento del diálogo siempre está visible en la pantalla TT

Answer 8

parent.$.modal.close(); funciona para un plugin modal simple.

Answer 9

Parece que ya encontraste la respuesta, pero para el beneficio de otros, puedes cerrar una implementación de iFrame de FancyBox usando el siguiente JavaScript en el iFrame:

parent.$.fn.fancybox.close();

Answer 10

Esto funciona para mí ...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />

Answer 11

Prueba colorbox , también es bueno.