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

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /usr/home/dissenyaweb.com/web/blog/diseno_web/wp-content/plugins/highlight-source-pro/highlight_source_pro.php on line 128
Compartir

44 comentarios sobre “Como hacer un pop up con HTML y Javascript con CSS Scale Transform (ventana emergente, modal frame)”

  • 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!.

  • 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

  • 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

  • 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.

  • 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.

  • 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”

  • robert mendoza dice:

    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

  • 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

  • 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..

  • 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.

  • Buenas tardes;

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

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

  • 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!

  • Carlos Vallejo dice:

    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

  • “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

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

  • 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 :/

  • 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.

  • 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?

  • 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

  • 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

  • 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.

  • 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,

  • 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,

  • 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

  • @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.

  • 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

  • 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?

  • 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?=?

  • Hola.
    Tengo un problemita toi construyendo una pagina web, al momento de visitar la pagina se activa automaticamente una ventana modal en la ke kiero mostrar datos dinamicamente de mi BD mysql. La ventana modal se muestra como en la pagina de openenglish lo ke no logro hacer es ke se cargue dinamicamente los datos de mi BD automaticamente.
    Si me pueden ayudar se los acradeceria mucho.
    Sigan adelante.
    GRACIAS.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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=""> <s> <strike> <strong>