Como hacer un pop up con HTML y Javascript con CSS Scale Transform (ventana emergente, modal frame)

Los malnombrados pop up’s, aunque tengan mala reputación no tienen porqué ser un incordio a la hora de navegar por internet sino todo lo contrario, nos pueden ayudar mucho a hacer nuestras páginas web más usables y atractivas para el usuario.

Otros nombres:

- Ventana emergente
- Modal frame
- Modal window
- Dialog box
- Ventana o caja de diálogo
- …

Veamos primero un ejemplo de nuestro pop up o ventana emergente (modal frame):

Ejemplo de pop up

¿Elegante verdad?

Ahora vamos a describir  paso a paso el procedimiento:

1- Descargamos los archivos necesarios aquí­ y los subimos a nuestro servidor:

- demo.css
- demo.js
- jquery-1.7.1.min.js

DESCARGAR ARCHIVOS

2-  Llamámos a la hoja de estilos CSS para que nuestro pup up (ventana emergente) tenga el aspecto que deseamos:

<link rel=”stylesheet” href=”demo.css”>

Asegúrate que indicas la ruta correcta dónde se encuentra tu archivo demo.css (en este caso está en la misma carpeta que el archivo donde queremos el popup)

Evidentemente, editando la hoja de estilo podras personalizar el aspecto de tu pop up.

3- Creamos el botón que disparará el pop up:

Utiliza este código para usar el efecto Zoom in

<input type=”button” value=”Pop up en Zoom In” data-type=”zoomin” />

O si lo prefieres utiliza este par el efecto Zoom out:

<input type=”button” value=”Pop up en Zoom Out” data-type=”zoomout” />

4- Creamos el contenido que se verá cuando la ventana emergente esté abierta:

<div class=”overlay-container”>
  1. <div class="window-container zoomin">
  2. <h3>Versión en Zoom in</h3>
  3. Texto de la ventana emergente<br/>
  4. <br/>
  5. <span>Cerrar</span>
  6. </div>

5- Llamámos al archivo demo.js para que nuestro pop up tenga estos efectos tan atractivos y activamos el JQuery:

<script>!window.jQuery && document.write(unescape('%3Cscript src=”jquery-1.7.1.min.js”%3E%3C/script%3E'))</script>
  1.  <script type="text/javascript" src="demo.js"></script>

Simplemente pega este código antes de la etiqueta </body> de tu página html.

Espero que este ejemplo sea de ayuda, para cualquier duda puedes dejar un comentario a este post

Esta entrada fue publicada en Diseño web general, Trucos y consejos web, Usabilidad. Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

43 Comentarios

  1. Publicado: 6 septiembre, 2012 a las 18:15 | Permalink

    Buen tuto bro

    tengo una duda para pasar una variable para que el popup la reciba como se podria hacer??

    Gracias de antemano

  2. Publicado: 7 septiembre, 2012 a las 8:30 | Permalink

    A que te refieres exactamente Jandro? Puedes incluir variables en el script del botón y también puedes modificar los .js para personalizarlo a tu medida…

  3. Sandoval
    Publicado: 25 septiembre, 2012 a las 1:29 | Permalink

    Saludos cordiales. Yo probé el ejemplo que usted colocó en este tutorial y me gustó, pero yo desearí­a cambiar algo; ¿es posible que el Modal Frame se dispare desde un link y no desde un botón?, ¿cuáles serí­an las modificaciones que tendrí­a que hacer?, pues no encuentro cómo cambiarlo. Gracias de antemano!.

  4. Publicado: 25 septiembre, 2012 a las 10:00 | Permalink

    Hola Sandoval,

    El disparador de la acción es data-type=”zoomin” , por lo tanto puedes probar de incluir esta etiqueta en el código del enlace.

    Si no te funciona podemos crear un disparador a medida para enlaces

    Un saludo

  5. Sandoval
    Publicado: 25 septiembre, 2012 a las 15:56 | Permalink

    Saludos cordiales.

    Estaba esperando con ansias tu ayuda, gracias por responder brevemente. Ciertamente, he probado de todas formas, hasta casi amanecer por dos dí­as y no he encontrado la manera de hacer que se dispare el pop up por medio de un enlace. El disparador es como una llave que abre el pop up, pero al cambiar la llave hay que cambiar también la cerradura para abrir el pop up y la verdad ya estoy frustrado.

    Por favor, crea un disparador a medida para este pop up, este es el que me gustó.

    Gracias de antemano, cordialmente… Sandoval

  6. LAC
    Publicado: 19 octubre, 2012 a las 22:47 | Permalink

    Muy buen tutorial gracias, me interesa mucho poder hacer lo mismo que Sandoval plantea pero por algún motivo no puedo hacerlo te coloco el código, espero me puedas ayudar.

    $(document).ready(function() {

    $(“#nUsuario”).click(function() {

    type = $(this).attr(‘data-type’);

    $(‘.overlay-container’).fadeIn(function() {

    window.setTimeout(function(){
    $(‘.window-container.’+type).addClass(‘window-container-visible’);
    }, 100);

    });
    });

    $(‘.close’).click(function() {
    $(‘.overlay-container’).fadeOut().end().find(‘.window-container’).removeClass(‘window-container-visible’);
    });

    });


         Nuevo usuario

    Esto lo coloco todo en el mismo archivo php.
    De ante mano muchas gracias.

  7. LAC
    Publicado: 20 octubre, 2012 a las 0:48 | Permalink

    Ya lo solucione, dejo a qui como lo hice esperando que les sea útil a alguien mas…

    function vEmergente() {

    $(‘.overlay-container’).fadeIn(function() {

    window.setTimeout(function(){
    $(‘.window-container.zoomin’).addClass(‘window-container-visible’);
    }, 100);

    });
    }

    function salirEmergente() {
    $(‘.overlay-container’).fadeOut().end().find(‘.window-container’).removeClass(‘window-container-visible’);
    };

    y en el enlace.

         Nuevo usuario
    (en realidad es la etiqueta a pero si la coloco aparece como enlace en la pagina)

    Todo esta en el mismo archivo.

    De nuevo gracias por el código.

  8. LAC
    Publicado: 20 octubre, 2012 a las 0:50 | Permalink

    Al parecer igual lo reconocio como enlace apezar de modificar la etiqueta.
    este seria el enlace todo dentro de la etiqueta “a”:

    href=”javascript:vEmergente()” style=”text-decoration:none”

  9. Félix Manuel
    Publicado: 2 noviembre, 2012 a las 1:22 | Permalink

    ¡Fenomenal! Te felicito.

  10. Jhuve
    Publicado: 18 diciembre, 2012 a las 14:51 | Permalink

    quiero que pop up me salte al cargar la pagina, no activado con un boton… como lo hago?

  11. Jhuve
    Publicado: 18 diciembre, 2012 a las 15:00 | Permalink

    lo intente entrando en los módulos de java pero no pude, le agradecerí­a la ayuda, esta excelente la ventana

  12. robert mendoza
    Publicado: 23 marzo, 2013 a las 6:20 | Permalink

    buenas noches esta muy bueno este tutorial yo tengo que hacer algo asi para la universidad un proyecto pero como la pagina que tengo tiene otros script de jquery que hace la funcion de un banner “slider” entran en conflito no se como solucionarlo las librerias se llama:

    todas funcionan pero cuando meto la del tutorial no hace ninguna accion aunque me muestra el elemneto
    e intentado solucionarlo con el noConflict
    pero en realidad no me funciona estoy cansado y estoy que boto la toalla por que no se como puedo aplicárselo al script de manera correcta

    le agradeceria un poco de ayuda gracias

  13. Publicado: 25 abril, 2013 a las 5:46 | Permalink

    Hola, gracias por tu tutorial , quiero saber si es posible dejar a “zoomout” y “zoomin” a la misma altura y no uno arriba y otro abajo. Gracias

  14. Publicado: 27 mayo, 2013 a las 17:45 | Permalink

    y si quiero poner un pop ups al iniciar mi web ejemplo cuando habra la direccion de mi web me aparesca el pop ups y me de la opcion de entrar con un boton..

  15. RonnV
    Publicado: 4 junio, 2013 a las 17:23 | Permalink

    Hola, Gracias por el código me sirvió mucho pero tengo una duda, quisiera bajar el tamaño del botón. No se en que parte lo puedo editar (en el Css o en Html). Solo esa parte me falta. Gracias por su ayuda.

  16. angel
    Publicado: 3 julio, 2013 a las 21:16 | Permalink

    Buenas tardes;

    soy nuevo en esto como hago para que esto me funcione de igual manera desde un archivo php

  17. angel
    Publicado: 3 julio, 2013 a las 21:23 | Permalink

    Me refiero en vez de utilizar un archivo index.html utilizar un archivo php y que su funcionalidad sea la misma….

  18. Cosmic
    Publicado: 5 octubre, 2013 a las 9:31 | Permalink

    Hola,

    Mi problema es el mismo que se comenta arriba. Me gustaria hacer saltar el popup al cargar la página.
    ¿Cómo se debe modificar el js para que funcione de esta forma?

    Gracias de antemano y enhorabuena por el popup, me encanta!

  19. Carlos Vallejo
    Publicado: 26 abril, 2014 a las 18:13 | Permalink

    Hola que tal, quisiera aportar un poco ya que este pop up me funciono de maravilla en el sitio web que ando haciendo, y quisiera apoyar respondiendo a los compañeros que preguntaban acerca de como hacer el pop up al inicio de la web, es sencillo en el archivo demo.js copian el codigo que el compañero LAC compartio y para que aparezca al cargar en la etiqueta body pongan lo siguiente:

    y con eso se cargara el pop up al iniciar la pagina.

    Saludos y muchas gracias

  20. Publicado: 6 octubre, 2014 a las 1:47 | Permalink

    “Nociones de base de datos”

    Hola que tal, soy nuevo en el foro.
    Tengo una pregunta estoy haciendo una web bueno ya esta echa practicamente, http://www.locompreahi.com el tema es que yo hace unos años hice un curso básico de diseño web no tengo nociones en lo mas minimo de base de datos y quiero hacer algo en mi pagina no se si lo que necesito es saber sobre base de datos o no para lo que quiero hacer.

    Mi idea es poder subir una cantidad X de productos que tengo a la venta pero poder modificarlos precios sin tener que cambiarlos uno por uno osea subir un %5 a todo o cosas asi sin tener que modificar manualmente todos. También quiero una pequeña celada con un pequeño texto que al apoyar el mouse sobre ella se despliegue en su totalidad pero que me de la opción de quedarme en ella si quiero o que si quiero quede abierta como si fuera el buscador de imágenes de google o algo similar.

    Desde ya un saludo al foro si tienen alguna idea

  21. benji
    Publicado: 2 diciembre, 2014 a las 15:43 | Permalink

    OLA M GUSTARIA SABER COMO HACER ESE EFECTO DE POP-UP AL CARGAR LA PAGINA, DE ANTEMANO GRACIAS Y BUEN DIA PROGRAMADORES

  22. Vile
    Publicado: 18 diciembre, 2014 a las 15:03 | Permalink

    Hola a todos, para que el efecto les funcione cuándo se cargue la página lo que hay que hacer es cambiar la línea 3 del código .js

    $('.button').click(function()

    y poner

    $(window).load(function()

    Hay un pero... cómo puedo definir el data-type desde el js?...
    usando

    type = $(this).attr('data-type');
    type = $('zoomout').attr('data-type'); //<--
    //o tal vez
    type = $(this).attr('data-type="zoomout"'); //?

    No sé cómo hacerlo :/

  23. Vile
    Publicado: 18 diciembre, 2014 a las 17:38 | Permalink

    Nop, ya lo logré.

    para quienes quieren hacer el pop-up cuándo se inicie el sitio web, deben descargar todo el código y hacer las siguientes modificaciones en .js

    línea 3

    $(window).load(function() {

    línea 5

    type = $('body').attr('data-type');

    y en su index, deben poner lo siguiente:

    y verán el lindo pop-up :)

    Saludos.

  24. Jose
    Publicado: 14 enero, 2015 a las 19:58 | Permalink

    Hola, adapte los pop-up para que funcionen como formulario, para ingresar datos nuevos funciona perfectamente pero no puedo hacerlo funcionar como formulario para editar datos existentes, estoy intentando dejar al pop-up en otro archivo php y llamarlo con javascript pero no me funciona, ya intente hacer lo mismo con tablas y combobox y no tengo ningun problema. ¿Alguna sugerencia?

  25. Publicado: 7 febrero, 2015 a las 7:04 | Permalink

    Excelente, yo lo adapte y lo use para bbcode en mi web, esta de lujo!

  26. Mario
    Publicado: 9 febrero, 2015 a las 14:57 | Permalink

    Hola, gracias por el tuto.
    Me podeis indicar que hay que añadir en el html si queremos que el pop up salga cuando cargamos la web, el usuario Vile lo mencionó pero no lo añadió.
    Muchas gracias
    Saludos

  27. Publicado: 9 febrero, 2015 a las 15:31 | Permalink

    David, en el body debes poner el data-type que está en el div que quieres cargar de inicio, osea zoomin o zoomout

  28. edu
    Publicado: 27 febrero, 2015 a las 19:33 | Permalink

    y si quioero hacer uno para dar like a mi sitio facebooky ponerlo en mi sitio web no blogger ni jomla

  29. Raphael
    Publicado: 3 abril, 2015 a las 13:51 | Permalink

    Esta muy bueno el tema felicitaciones, una consulta caso quieras que el popup se abre cuando presione el boton pero que antes tenga rellenado algunos campos importantes en la web como puedo hacer

  30. Iván
    Publicado: 6 enero, 2016 a las 12:04 | Permalink

    Buenos días, está muy bueno el efecto.
    Ahora una consulta: ¿cómo se puede hacer que uno de estos efectos (cualquiera) se abra automáticamente al ingresar a una página de un sitio y se cierre en x cantidad de segundos?
    Muchas gracias.

  31. Kyushudo
    Publicado: 26 febrero, 2016 a las 15:10 | Permalink

    Buenas tardes,
    Gracias a tu codigo he aprendido a como realizar las ventanas modales, pero tengo una duda, me gustaría que saliese una vez enviado un formulario de contacto, alguien podría ayudarme?
    he probado intentando así:

    Estado envío
    Gracias, su mensaje se envió correctamente.
    Cerrar

    <?php
    }
    }

    pero nada, he miralo la parte del archivo .js (no sé casi nada de javascript) y lo único que veo
    que debería cambiar la parte
    $('.button').click(function() {
    por alguna otra que me permita, primero enviar formulario y después mostrar la ventana,
    pero no soy capaz de sacarlo después de más de una semana liada con el tema.

    muchas gracias de antemano y saludos,

  32. Kyushudo
    Publicado: 26 febrero, 2016 a las 15:13 | Permalink

    Creo que en post anterior no sale bien el código:

    Estado envío
    Gracias, su mensaje se envió correctamente.
    Cerrar

    <?php
    }
    }

    muchas gracias de antemano y saludos,

  33. txema
    Publicado: 4 marzo, 2016 a las 20:53 | Permalink

    Hola, Me interesa la solucion de Lac para cambiar el boton por un enlace, pero llevo dos dias y no doy con ello. Alguien sabe como, que y donde hay que poner el codigo de Lac? y el enlace que aparace un poco mas abajo?
    De todos modos gracias a todos.
    Saludos

  34. Publicado: 7 marzo, 2016 a las 10:17 | Permalink

    @Txema, el código debes ponerlo o en el index o en tu archivo js y debes llamar las funciones a tu index.

  35. Publicado: 7 marzo, 2016 a las 10:19 | Permalink

    @kayshudo, para eso que quieres hacer deberías probar con bootstrap el modal que aparece allí funciona perfectamente y tratar de poner tu código php en un archivo aparte, para que manejes las funciones desde allá y lo invocas en el evento post de tu form.

  36. kyushudo
    Publicado: 10 marzo, 2016 a las 8:15 | Permalink

    @Vile, muchas gracias por la información probaré con bootstrap.

    saludos

  37. Publicado: 26 mayo, 2016 a las 1:47 | Permalink

    Como cambio el botón por un enlace y que me lleve a la misma información.

  38. alvaro
    Publicado: 4 julio, 2016 a las 20:16 | Permalink

    Quisiera hacer exactamente lo que haces en tu ejemplo http://dissenyaweb.com/blog/diseno_web/ejemplo_popup/ pero no puedo con la información que diste acá.
    Específicamente quiero que aparezca solo una caja de diálogo al hacer clic sobre uno de los dos botones

  39. alvaro
    Publicado: 4 julio, 2016 a las 20:45 | Permalink

    Ya lo resolví.
    Lo que me sucedió fue que al editar el archivo demo.css me mostraba las dos cajas de diálogo ya que había cambiado de 0 a 1 el atributo opacity en .window-container

  40. erick cedeno
    Publicado: 17 septiembre, 2016 a las 20:33 | Permalink

    Como puedo quitar le el botón y que se cierre con un click en la suscripción!

  41. Publicado: 14 noviembre, 2016 a las 21:01 | Permalink

    Buenas tardes, tengo una duda…

    Pude implementar esta herramienta a mi diseño web, se ejecuta perfectamente cuando en mi documento, ya sea html o php, hay solamente una ventana emergente. pero a la hora de poner dos pop up en un mismo archivo, solamente muestra uno.

    Quisiera saber como poner una ventana emergente para mi Registro de Usuario y Otro para mi Inicio de Sesión.

    Mi pregunta es, como puedo ejecutar dos o mas pop up en un mismo documento web, sin modificar o duplicar el CSS en varias clases?

  42. Publicado: 15 noviembre, 2016 a las 8:42 | Permalink

    Hola Manu,

    Para utilizar más de uno en un mismo documeto debes utilizar distintos nombres para evitar conflictos entre ellos.

    Un saludo

  43. brian
    Publicado: 7 febrero, 2017 a las 15:47 | Permalink

    Vile no puso que hay que poner en el html para lanzarlo automaticamente…
    no lo puedo cosneguir.
    hice todos los cambios pero como le aplico el zoomin?=?

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By: Dissenyaweb.com