2010-01-05 21 views
17

Estoy usando jQuery ColorBox para mostrar un artículo de carrito de la compra. Cuando un usuario ingresa la cantidad en el iFrame (abierto con colorbox) y hace clic en el botón de enviar, quiero que iFrame esté cerca y que la ventana principal (principal) se actualice automáticamente.Cerrar ColorBox iFrame después de enviar

quiero decir que quiero dos cosas después de presentar datos sobre iFrame:

  1. iFrame se cierra automáticamente.
  2. Ventana principal que se actualiza automáticamente.

Por favor, ayúdenme.

Respuesta

35

utilizar esto en la ventana padre mientras que la apertura:

$(document).ready(function(){ 
    $(".chpic").colorbox({width:"80%", height:"80%", iframe:true, 
     onClosed:function(){ location.reload(true); } }); 
}); 

y esto para cerrar el marco flotante dentro de la página iframe:

parent.$.fn.colorbox.close(); 
+1

¡Gracias brillantes! – Amien

+1

@nik ¿hay alguna forma de pasar un parámetro al método onClosed? – Anthony

+0

Lo siento @Anthony por la respuesta tardía, que viene aquí en sc después de mucho tiempo. siempre puede invocar una función en la ventana principal de su iframe como: window.parent.functionInParent ('myData'); justo antes del padre. $. Fn.colorbox.close(); – nik

3

Después de que el formulario se envía en el fotograma 1, puede utilizar el siguiente JavaScript para recargar el marco principal: iframe

window.parent.location.reload(true); 
+0

donde tengo que escribir esto? N que marco o en el padre html? y creo que esto no funciona en jquery colorbox – diEcho

+0

Utilicé esto en un botón de cierre en un colorbox y funcionó de maravilla: cerró el iframe y volvió a cargar la página principal. –

1
<form target="_top"> 
1

dar forma etiqueta de la siguiente manera:

<form target="_top"> 

continuación, después de presentar:

response.redirect("your form") 
2

jQuery abierto .colorbox.js encuentra estas dos piezas s de código:

$close.click(function() { 
    publicMethod.close(); 
}); 


$overlay.click(function() { 
    if (settings.overlayClose) { 
    publicMethod.close(); 
    } 
}); 

sustituir con éstas - tenga en cuenta la adición de "window.location.reload();"

$close.click(function() { 
    publicMethod.close(); 
    window.location.reload();   
}); 


$overlay.click(function() { 
    if (settings.overlayClose) { 
    publicMethod.close(); 
    window.location.reload(); 
    } 
}); 
+2

modificar la fuente original suena como una mala idea –

0

Si está utilizando Drupal 7, puede que tenga que utilizar la siguiente alternativa:

parent.jQuery.colorbox.close(); 

En D7, los $ .fn parece ser reemplazado por el objeto jQuery.

simplemente configurar una devolución de llamada menú que simplemente se devuelve la siguiente:

return <<<EOF 
<script type="text/javascript"> 
    <!--//--><![CDATA[//><!-- 
    parent.jQuery.colorbox.close(); 
    //--><!]]> 
</script> 
EOF; 

parecía funcionar bien para mí :)

+0

¿Por qué se votó negativamente? – Nick

1

Simplemente simular un clic en el botón de cierre, así:

$("#cboxClose").click(); 
+0

este es el único que trabaja para mí. muy inteligente. las otras soluciones aparentemente no son válidas porque solo puede cerrar un colorbox con el mismo Javascript que lo abrió. – Mauro

0

Si usted desea permanecer en la página actual:

  1. escribe el siguiente código en la página principal donde se aplica colorbox.

    $(document).ready(function(){ 
    
    $(".tu_iframe_800x600").colorbox({width:"80%", height:"100%", iframe:false 
    
        }); 
    }); 
    
  2. y el código siguiente en su página actual en la que desea cerrar colorbox parent.$.fn.colorbox.close();

Nota: por favor, sustituir .tu_iframe_800x600 con su clase html en el que se llama la caja de colores ...

+0

por favor edite su publicación y formatee el código para que sea legible – kleopatra

Cuestiones relacionadas