/ JavaScript

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

Demo pop-ups JavaScript

Info

Más información acerca de window open

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más