Como abrir un pop up desde un enlace usando JavaScript

Generar pop ups cuando un usuario pincha un enlace, empleando JavaScript.

Los pop ups publicitarios que se abren solos una vez que el usuario accede a una página web es considerado como una práctica inconveniente en el diseño de páginas web. Sin embargo, esto no implica que los pop ups en sí mismos sean algo que no deba usarse. Muy por el contrario, en muchos casos puede resultar de gran utilidad, tanto para los webmasters como para los propios usuarios.

Acceder a ciertos contenidos (una imagen ampliada, un formulario, contenido adicional, ayudas, etc.) sin tener que abandonar la página para luego tener que retroceder para continuar con la página en la que se estaba, resulta una mejora en la navegación por los contenidos de una página web, algo que siempre es deseable por temas de usabilidad.

La técnica más sencilla es hacer que cuando se activa un enlace por parte del usuario, se abra el contenido en una ventana o pestaña nueva, para lo que se utiliza uno de los valores de la propiedad “target” de los enlaces. Si bien existen muchos valores que se pueden dar al atributo “target”, el más común y que nos interesa tratar en esta parte, es el valor “_blank”, que hace que la página enlazada se abra en una nueva ventana o pestaña. El código que se debe emplear es el siguiente:

<a href="https://www.lawebera.es" target="_blank">
Enlace a lawebera.es
</a>

Para muchos casos, esto puede ser inconveniente, ya que obliga al usuario a cambiar entre ventanas o pestañas para navegar entre los dos contenidos. Para evitar este tipo de inconvenientes, una buena solución son las ventanas pop up. Además de la opción que presentaremos más adelante, cabe consignar que existen otras alternativas, como pop ups en DHTML, Flash, etc., que si bien pueden ser más agradables visualmente, tienen el inconveniente de que requieren códigos extra e imágenes, aumentando considerablemente el peso de la página, además de ser soluciones más complejas y por ello, requerir un nivel más elevado de conocimientos.

Pop ups en JavaScript

Al iniciar este breve tutorial, debemos hacer la advertencia de que existe más de una forma de hacer que se abra una ventana pop up con JavaScript, pero que solo existe una forma correcta y es la que describiremos. Pero también mostraremos los siguientes códigos que no son correctos, y explicaremos las razones por las que consideramos que no es bueno emplearlos:

<a href="#" 
onClick="window.open('https://www.lawebera.es','popup', 'width=400px,height=400px')">
Enlace a lawebera.es
</a>

<a href="javascript:window.open('https://www.lawebera.es','popup','width=400px,height=400px');">
Enlace a lawebera.es
</a>

En ambos códigos, además de otros inconvenientes de navegación y usabilidad, el problema más grave consiste en que cuando un usuario que no tiene activadas funciones JavaScript en su navegador, no puede acceder al contenido que se pretende mostrar; aún peor, ni siquiera habrá reacción ninguna a cualquier cosa que quiera intentar sobre el enlace. Otro inconveniente grave, es que el enlace es invisible para los robots de los buscadores, por lo que si el contenido que se quiere mostrar en la ventana tiene como única vía de acceso este enlace o varios enlaces similares, el mismo no existirá para el buscador y no lo indexará. Los usuarios tampoco podrán hacer uso de algunas funciones, como guardar el contenido en marcadores, o copiar el enlace, etc.

Esto se debe a que la dirección del enlace es manejada dentro del propio código JavaScript y no en el HTML, que es la forma correcta. Así que la forma correcta de integrar un código JavaScript que abra un pop up debe tener la siguiente forma:

<a href="https://www.lawebera.es" target="popup" 
onClick="window.open(this.href, this.target, 'width=400px,height=400px'); return false;">
Enlace a lawebera.es
</a>

Como podemos ver, en primer lugar tenemos que la dirección del enlace se encuentra descrita en “href”, es decir, dentro del HTML y no dentro del JavaScript como en los dos casos anteriores, y que la forma en que se abrirá el enlace (“popup”) también se encuentra definida del mismo modo. Luego, aparecen las dimensiones de la ventana, algo que explicaremos más adelante, y la sentencia “return false”, que tiene la función de evitar (sobre todo para algunos navegadores) que se produzcan efectos sobre la ventana de origen al pulsar el enlace.

Atributos de la ventana pop up

Dentro del código JavaScript podremos determinar muchas características de la ventana pop up. En el código que ya hemos visto, ya determinamos las dimensiones de la ventana, simplemente utilizando las propiedades “widht” y “height”, a los que podremos dar los valores que deseemos (en las unidades que queramos), con lo que podremos ajustar las dimensiones de la ventana a las dimensiones del elemento contenido.

Cuando se abre una ventana pop up con los atributos que hemos manejado en el código anterior, la ventana se ajusta a la esquina superior izquierda de la pantalla. Pero es posible que queramos que la ventana se abra en otra posición de la pantalla, por lo que para ello utilizaremos las propiedades de posicionamiento “top” y “left”, que marcan la distancia de cada uno de estos bordes, también en las unidades que deseemos utilizar. Continuando con el ejemplo anterior:

<a href="https://www.lawebera.es" target="popup" 
onClick="window.open(this.href, this.target, 'toolbar=0 , location=1 , status=0 , menubar=1 , scrollbars=0 , resizable=1 ,left=150pt,top=150pt,width=400px,height=400px'); return false;">
Enlace a lawebera.es
</a>

Otros elementos que se pueden determinar son:

• Con o sin barra de herramientas (toolbar=1 o toolbar=0), cuyo valor por defecto es 0
• Con o sin barra de navegación (location=0 o location=1), con valor por defecto 1. No funciona en todos los navegadores.
• Con o sin barra de estado (status=1 o status=0), con valor por defecto 1.
• Con o sin barra de menú (menubar=1 o menubar=0), con valor por defecto 0.
• Habilitar o no el cambio de tamaño (resizable=1 o resizable=0), con valor por defecto 1, aunque es variable con el navegador. En algunos, siempre es posible modificar el tamaño de la ventana.
• Con o sin barras de desplazamiento (scrollbars=1 o scrollbars=0), siempre y cuando el tamaño del contenido lo posibilite.

En próximos artículos, veremos como hacer para no tener que repetir el código cada vez que tengamos que generar uno de estos enlaces, colocando el código en el “head” o en archivo separado, como hacer para abrir ventanas con botones o que se abra el pop up al cargar la página.