Crear pop-ups con JavaScript

Los pop-ups Windows o ventanas emergentes se utilizan para múltiples casos, el lo particular lo uso para mostrar una ventana de suscripción a mi lista de correos; también lo usan para mostrar publicidad y lo mas importante hay que tener cuidado cuando estas ventanas carguen porque podrían adjuntarse virus, spyware el cual dañaría a su equipo.

Pero dejando de lado todo lo negativo y el malintencionado de los usuarios en este tutorial les voy a enseñar como crear pop-ups Windows o ventanas emergentes con JavaScript.

Sintaxis

window.open(URL,name,specs,replace);  

El método window.open() crea el pop-up, el cual recibe varios parámetros como:

  • URL: aquí escribirás la ruta URL como por ejemplo http://01luisrene.com
  • name: es el nombre que se le asignara al pop-up
  • specs: son las propiedades como ancho, altura, margen left, margen top...
  • replace: es opcional, especifica si la dirección URL crea una nueva entrada o sustituye a la entrada actual de la lista del historial.

Reemplazando todos los parámetros quedaría así.

window.open("http://01luisrene.com", "miVentana", "width=380, height=500, top=85, left=50", true);  

Ejemplo de uso

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">
  <title>pop-ups o ventanas emergentes</title>
</head>  
<body>  
  <button id="botonWindowOpen">Abrir pop-up</button>
  <button id="botonWindowClose">Cerrar pop-up</button>
  <script>
    //Variable que almacena el método window.open()
    var miVentana;

    //La función window_open crea el pop-up o ventana emergente
    function window_open(){
      miVentana = window.open( "http://01luisrene.com", "nombrePop-Up", "width=380,height=500, top=85,left=50");
    }

    //La función window_close cerrara el pop-up o ventana emergente
    function window_close(){
      miVentana.close();
    }

    // Llamo a la función window_open en el evento click del botón con id = "botonWindowOpen"
    document.getElementById("botonWindowOpen").onclick = function() {window_open()};

    // Llamo a la función window_close en el evento click del botón con id = "botonWindowClose"
    document.getElementById("botonWindowClose").onclick = function() {window_close()};
  </script>
</body>  
</html>  

Ver resultado

See the Pen Font Awesome - Usar fuentes en forma de iconos by Luis Rene Mas Mas (@01luisrene) on CodePen.

Info

Más información acerca de window open

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión