/ 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

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más