Noticias 

Creando Un Pop-Up Sencillo

Algo que es muy utilizado y que, a pesar de haber toneladas de información y códigos en la red, se sigue preguntando y pidiendo es cómo hacer una ventana pop-up.
Creo que la mejor forma de no ahogarse en un vaso de agua tratando de adaptar algún script que encontremos por ahí y que no se ajuste exactamente a lo que queremos es aprender a hacerlo desde cero conociendo los conceptos elementales.

El método open()

El objeto window posee un método para abrir nuevas ventanas: el método open().
window.open();
Eso abrirá una nueva ventana vacía con Javascript (no cargará ningún documento en ella)
Si queremos que cargue algún documento dentro de la ventana nueva se lo indicamos pasándolo como parámetro y poniéndolo entre comillas dentro de los paréntesis:
window.open(‘pagina.html’)
Eso abrirá una ventana nueva con el documento pagina.html cargada adentro.
El método open() acepta 3 parámetros. Se le puede pasar uno, dos, los tres o ninguno
window.open(documento, nombre de la ventana, atributos de la ventana)

documento

URI del documento a ser cargado dentro de la nueva ventana.

Nombre de la ventana

identificador para la nueva ventana. Sirve para poder hacer referencia a la ventana después de haber sido abierta en caso necesario.

Atributos de la ventana:

una serie de pares nombre/valor que permite asignarle a la nueva ventana determinadas características, tales como tamaño, posición, barras a mostrar ….
Algunos de los atributos disponibles para la mayoría de navegadores:

width

anchura de la ventana (en píxels).

valor
número entero positivo.

height

altura de la ventana (en píxels).

valor
número entero positivo.

top

posición de la ventana desde la parte superior (en píxels).

valor
número entero.

left

posición de la ventana desde la izquierda (en píxels).

valor
número entero.

toolbar

determina si la barra de herramientas del navegador es o no mostrada.
IE7 ignora la instrucción de no mostrar esta barra con el fin de que los usuarios puedan saber en qué dirección se encuentran.

valor
booleano (yes/no).

status

determina si la barra de estado (status) es o no mostrada.

valor
booleano (yes/no)

location

indica si la barra de dirección es o no mostrada.

valor
booleano (yes/no)

directories

indica si la barra personal es o no mostrada.

valor
booleano (yes/no)

scrollbars

indica si la barra de scroll es o no mostrada.

valor
booleano (yes/no)

menubar

indica si la barra de menús es o no mostrada.

valor
booleano (yes/no)

Abriendo una ventana ante un evento determinado

Si queremos que una ventana sea abierta ante un evento determinado, como por ejemplo un click de ratón del usuario en un botón, podemos definirlo directamente en el manejador del evento del propio botón.
onclick=”window.open(‘nueva.html’,’nuevaVentana’,’width=300, height=400′)”
<input type=”button” value=”Abrir ventana”onclick=”window.open(‘nueva.html’,’nuevaVentana’,’width=300, height=400′)” />

Abriendo una ventana desde una función

Podemos crear una función que se encargue de abrir la ventana nueva y llamarla en el manejador del evento del botón.
<script type="text/javascript">
<!-- function ventanaNueva(){
window.open('nueva.html','nuevaVentana','width=300, height=400')
}
//-->
</script>
Y dentro del botón hacemos la llamada a la función en el manejador del evento
<input type=”button” value=”Abrir ventana” onclick=” ventanaNueva()” />
Si queremos usar la misma función para abrir la ventana más de una vez con distintos documentos cargados dentro de ella podemos agregarle una variable a la función que le pasaremos como argumento cuando la llamemos.
function ventanaNueva(documento){
window.open(documento,'nuevaVentana','width=300, height=400');
}
Y al llamar a la función desde los distintos botones le pasamos el dato como parámetro.
Botón 1
<input type=”button” value=”Abrir ventana” onclick=”ventanaNueva(‘pagina1.html’)” />

Botón 2
<input type=”button” value=”Abrir otra ventana” onclick=”ventanaNueva(‘pagina2.html’)” />
Usando la función para abrir la ventana más de una vez con distintas dimensiones

Podemos usar la misma función para que, además, cada ventana que sea abierta desde distintos botones tenga dimensiones distintas. Le enviaremos los valores que queramos pasados como argumentos a la función y haremos una concatenación para crear la cadena de atributos.
function ventanaNueva(documento,ancho,alto){
window.open(documento,'nuevaVentana','width=' + ancho + ', height=' + alto);
}
Y al llamar a la función desde los distintos botones le pasamos los datos de ancho y alto como parámetros.
Botón 1
<input type=”button” value=”Abrir ventana” onclick=” ventanaNueva(‘pagina1.html’, 300, 400)” />

Botón 2
<input type=”button” value=”Abrir otra ventana” onclick=” ventanaNueva(‘pagina2.html’, 420, 550)” />

Haciendo referencia a la ventana

Si por alguna razón una vez abierta nuestra ventana necesitamos hacer algo con ella desde Javascript debemos de poder referirnos a ella de algún modo. Para eso está el segundo parámetro de la función open() que define el nombre de la ventana; en el caso del ejemplo que hemos estado usando la ventana se está llamando nuevaVentana aunque podríamos haberla llamado vladimir oleporcia.
Si una vez abierta quisiéramos hacer algo con ella, como por ejemplo cerrarla usando el métodoclose() mediante otro botón nos referiríamos a ella por el nombre que le hayamos asignado al momento de crearla.
onclick=”nuevaVentana.close()”

Abrir distintas ventas distintas desde la misma función

Podemos enviar otra variable más como argumento a nuestra función del ejemplo para asignar distintos nombres a cada ventana que abramos desde un botón diferente. Con eso lograremos que se abran ventanas distintas, algo que no sucede si cada vez que llamamos a la función nos crea la ventana nueva con el mismo nombre, como ha estado haciendo la función del ejemplo hasta ahora.
function ventanaNueva(documento,ancho,alto,nombreVentana){
window.open(documento, nombreVentana,'width=' + ancho + ', height=' + alto);
}
Botón 1
<input type=”button” value=”Abrir ventana” onclick=”ventanaNueva(‘pagina1.html’, 300, 400, ‘ventana1’)” />

Botón 2
<input type=”button” value=”Abrir otra ventana” onclick=”ventanaNueva(‘pagina2.html’, 420, 550, ‘ventana2’)” />

De esta forma cada botón abrirá una ventana distinta con distintos documentos cargados en cada una de ellas.

La función tal y como estaba antes abría los distintos documentos desde los diferentes botones cargando documentos diferentes pero los abría en la misma ventana, es decir, en ningún momento podrían haber dos ventanas abiertas a la vez dado que se estaban abriendo siempre con el mismo nombre. Si en el momento de llamar por segunda vez a la función la ventana aún se encontraba abierta (no se había cerrado) el segundo documento sería cargado dentro de esa ventana ya abierta.
Al asignar en cambio un nombre distinto para cada ventana sí puede haber más de una ventana abierta simultáneamente.

Usando links para abrir ventanas.

Es importante que toda la información sea accesible y se pueda acceder al recurso al que se pretende llegar y no es recomendable delegar al 100% a Javascript el acceso a un recurso. Podemos usar un link al documento que queramos mostrar dentro de nuestra ventana pop-up; de esta forma nos aseguramos de que, en el caso de estar siendo visualizada nuestra página en algún dispositivo sin soporte para Javascript, nuestro documento pueda ser llamado de forma alternativa desde este link.
La forma más simple de hacerlo usando la misma función del ejemplo es la siguiente:
<a href=”pagina.html” target=”ventana1″ onclick=”ventanaNueva (”, 300, 400, ‘ventana1’);”> pagina </a>

En el evento click llamamos a la función creando una ventana pop-up asignándole un nombre ventana1 y al link le hemos agregado un target hacia esa ventana. Así el link al ser activado carga el documento dentro de la ventana que abrimos desde el manejador de eventos onclick. Observar que al llamar a la función no es necesario indicar el documento que queremos que se cargue y lo dejamos como una cadena vacía ” (dos comillas simples). Como en realidad lo que estamos haciendo es desviar el destino del link a la ventana nueva no es necesario indicarle a la función Javascript que debe cargar un determinado documento pues ya se encarga el propio link de hacerlo.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas relacionadas