Ventana Modal

Tipdar · #1 (**permalink**) 23/03/2006, 14:34

Esto no es una pregunta... Soy bastante nuevo en javascript y estoy compartiendo con todos los interesados la manera en que he logrado hacer una ventana modal con javascript y que al menos funciona en Mozilla, Firefox e Internet Explorer con el mismo código. Antes de continuar digo que esto es perfectamente cuestionable, espero que le hagan mejoras, y si hay otras maneras de hacerlo les ruego que me lo hagan saber por esta vía. Recalco que soy un principiante en javascript y es precisamente por eso que he puesto este post... para mejorar mis códigos, compartir ideas. Por favor, les ruego que me critiquen esto... le encuentren fallos... cualquier cosa.

Bien... para comenzar, en la ventana padre (opener) puse:

Código PHP:

  <script language="javascript">
var vent = null;
function foco() {
   if (vent != null)
       vent.focus();
}
function cerrar() {
   vent = null;
}

function abrirPop() {
   vent = window.open(camino,"vent","width=200, height=200, scrollbars=no, menubar=no, location=no, resizable=no");
}
</script>

En esa misma página en la etiqueta body puse:
<body onfocus="foco()">

luego llamé la función abrirPop donde hacía falta abrir la ventana emergente...

En la ventana hija:

Código PHP:

  <script language="javascript">
function cerrarPop() {
  opener.cerrar();
  window.close();
}
</script>

y en su tag body puse:

<body onunload="opener.cerrar()">

y para cerrar el pop elegantemente puse un botón que llama a cerrarPop()

Eso es todo... Espero que pueda ser útil.

Release your sources and improve the forces that spread between all of us...

caricatos · #2 (**permalink**) 23/03/2006, 16:25

Hola:

Si no me equivoco estás hablando de ventanas emergentes o popups y las ventanas modales son: alert, confirm y prompt.

Sobre el script, lo único que veo interesante es que te has preocupado por controlar el cierre de la ventana, por lo demás... no es necesario usar el mismo nombre de la variable y la ventana... lo del camino, tal vez sea mejor usarlo como parámetro, y ya que controlas si se ha cerrado la ventana, se podría mejorar (a mi parecer) dándole parámetros y controlando que esté abierta...
algo así:

function abrirPop(camino, params) {
if (vent != null) vent.close();
vent = window.open(camino,"popup",params);
}

Así puedes cambiar las dimensiones y otras características...

<span onclick="abrirPop('popup.html', 'width=300,height=200')">prueba</span>

Tienes información sobre popups en la FAQ-100, de paso te paso un link de un artículo sobre popups: http://www.maestrosdelweb.com/editorial/formenlaces/

Saludos

Tipdar · #3 (**permalink**) 23/03/2006, 18:57

Gracias por tus sugerencias, amigo! Pero con respecto al nombre de modal... creo que a un principiante se le pueden permitir ese tipo de chorradas... pero vamos, que esto es solo un ejemplo... por supuesto que se puede parametrizar todo lo que quieras.

Suerte!

caricatos · #4 (**permalink**) 24/03/2006, 00:54

Hola:

Todos podemos equivocarnos, incluso mi intención al escribir, es esperar que me corrijan cuando estoy equivocado...

Hay unas ventanas propias del explorer que se llaman modales y se crean con una orden: showModalDialog o algo similar (no estoy seguro porque al no ser estandar directamente no las uso)...
... y por la red se pueden encontrar otra especiales "chromless" que tienen un aspecto distinto en explorer y viéndolas con otros navegadores solo se ven popups normales.

Como verás, solo tengo la intención de ayudarte. Por cierto, de esa manera solo se puede usar una ventana (por el segundo parámetro del open)... como tu mismo dices, todo se puede parametrizar.

Saludos

Robertoch · #5 (**permalink**) 24/03/2006, 09:00

Hola a que te refieres que las showmodaldialog no son estandar, yo soy nuevo en esto y las pienso usar, que efectos podria tener contradictorios? o porque dices eso?

Saludos

Tipdar · #6 (**permalink**) 24/03/2006, 11:02

Las showmodaldialog no son estandar porque solo funcionan en internet explorer. Por eso precisamente es que se me ocurrió lo que puse arriba... que no será lo mejor, pero resuelve el problema en muchos más browsers.

caricatos francamente aprecio tu ayuda... ya he cambiado mis códigos con lo que me has explicado y no creo que te hayas equivocado, al contrario, tu comentario ha sido mucho más que una ayuda, yo simplemente puse la idea... lo otro viene después...

Nos vemos, amigo.

Robertoch · #7 (**permalink**) 24/03/2006, 13:57

Trate de poner el codigo pero no me realiza ningun efecto el que pusiste, sera que tecleaste algo mal, por que ya lo revise y revise y no lo hace tipo modal el window.open

Robertoch · #8 (**permalink**) 24/03/2006, 13:59

o un detalle yo utilizo asp.net a la mejor y ahi no funciona pero si javascript pienso que deberia funcionar o estoy equivocado?

Tipdar · #9 (**permalink**) 24/03/2006, 19:04

Cita:

Iniciado por Robertoch

o un detalle yo utilizo asp.net a la mejor y ahi no funciona pero si javascript pienso que deberia funcionar o estoy equivocado?

Particularmete no uso ASP ni ASP.NET, uso JSP. No creo que dé problemas, si quieres me mandas un privado con tu email y te mando el ejemplo funcionando.

Recuerda que debes poner <body onfocus="foco()"> en la ventana padre que es lo que garantiza que se ponga el foco en la ventana hija en caso de que exista. Otra cosa... asegúrate de almacenarlo en la variable vent (vent="window.open.....")

Saludos,
Tipdar

Valadir · #10 (**permalink**) 22/01/2007, 15:24

Una mejora al codigo inicial.

Es basicamente el mismo codigo pero utilizo algunos truquillos que te quitan el tener que saberte el nombre de la ventana padre mas una validacion de los parametros de la ventana modal con Expresiones regulares.

Codigo js que llama a la ventana modal:

<script language="javascript" type="text/javascript">

</script>

En el body se mantiene el foco.

<body onfocus="javascript:foco();">

En la ventana hija se varia un pelin el codigo:

<script language="javascript" type="text/javascript">

</script>

El body de la ventana se mantiene casi igual

<body onunload="javascript:padre.cerrar();">

Como se daran cuenta es en si el mismo codigo solo que se esta usando el metodo window.opener, que nos ayuda a identificar cual es la ventana que la llamo y asi solamente hacer copy y paste sin necesidad de estar modificando el script. (Con unos cuantos cambios y todo este codigo podra ser simplemente enpaquetado en un par de archivo js)

Ojo no es necesario poner nombre a la ventana padre pero si quieren tener orden mejor.

Si lo ejecutan en firefox deben estar seguros que en las pociones avanzadas de contenido este todas las funciones marcadas.

Tambien pueden averiguarse sobre opendialog que hace exactamente lo mismo pero con menos codigo. Aunque aun tengo que evaluar si es factible su utilizacion y si no trae complicaciones como showModalDialog de IE

mgatti · #11 (**permalink**) 21/08/2007, 12:49

Buenas estaba leyendo la discusión, yo tengo un problema a ver si es posible que me ayuden.

Necesito crear una ventana modal de tipo showModalDialog, estoy trabajando con firefox, y como unicamente es para IE, tengo un gran problema con eso.

Lo que en si necesito es al hacer una ventana emergente haciendo la llamada por algún enlace, la ventana desde que hice esa llamada quede totalmete bloqueada hasta que cierra la ventana emergente. MUCHAS GRACIAS

kikeconk · #12 (**permalink**) 16/02/2010, 18:24

Parecen principiantes, en vez de tanto codigo, variables glovales, etc.
Solo tienen que poner .focus() al final del window.open

window.open(camino,"vent","width=200, height=200, scrollbars=no, menubar=no, location=no, resizable=no").focus();

jmperro · #13 (**permalink**) 25/01/2012, 08:04

Estimados, el método showModalDialog es parte del estándar y funciona en todos los navegadores.