9 de octubre de 2009

Tutorial JavaScript: Cerrar VentanaModal desde la ventana hija

El problema que os detallo a continuación parece que es muy común entre la gente que usa mi script de VentanaModal. Para no tener que resolver más voy a hacer una entrada aclarándolo porque es muy sencillo y así no tengo que contestar uno por uno :D

Bueno, el problema es el siguiente: tenemos una ventana modal que se cierra mediante el botón X que tiene en la esquina superior derecha, pero nosotros lo que pretendemos es crear en la ventana hija (la página que abrimos dentro de VentanaModal) un botón que también pueda cerrar la ventana. La mayoría de los que usan el script se encuentran con el mismo contratiempo cuando intentan resolver el anterior problema: pensando que el botón X tiene como código VentanaModal.cerrar(); pensamos que la misma instrucción servirá también para cerrarla desde la ventana hija. Error.

El script VentanaModal crea un conjunto de capas para simular una ventana modal dentro del navegador. Hay muchas formas de usar este script. Si el uso que le dáis es la implementación que yo hice de abriVentanaFija() y/o abriVentanaVariable() debéis saber que éstas crean un iframe (un marco interno) donde se abre la página o el archivo que le indicamos como parámetro a la función. Aunque veáis que la página aparece incrustada, son dos archivos totalmente diferentes e independientes. Así pues, la página hija (la que aparece dentro de VentanaModal) no tiene acceso a los archivos de la página padre y por lo tanto debéis cerrarla desde el padre. Bastará con poner parent delante de todas las sentencias para que JavaScript sepa que el código que va a ejecutar se encuentra en la página padre (la que crea una ventana modal).

Así pues, y contestando a muchas personas que han tenido este problema, la solución es poner en el código del botón (o la imagen, o el enlace, etc) parent.VentanaModal.cerrar().

Espero que con esto haya despejado las dudas de mucha gente. Si encontráis algún problema avisadme, porque seguramente sea cuestión de una fallo redacción por mi parte. Para otras dudas sigo estando en contacto@ruido4design.com.

Saludos