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

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

44 comentarios

Ir al formulario de comentarios

    • Jandro on 6 septiembre, 2012 at 18:15

    Buen tuto bro

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

    Gracias de antemano

  1. 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…

    • Sandoval on 25 septiembre, 2012 at 1:29

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

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

    • Sandoval on 25 septiembre, 2012 at 15:56

    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

    • LAC on 19 octubre, 2012 at 22:47

    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.

    • LAC on 20 octubre, 2012 at 0:48

    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.

    • LAC on 20 octubre, 2012 at 0:50

    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”

    • Félix Manuel on 2 noviembre, 2012 at 1:22

    ¡Fenomenal! Te felicito.

    • Jhuve on 18 diciembre, 2012 at 14:51

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

    • Jhuve on 18 diciembre, 2012 at 15:00

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

    • robert mendoza on 23 marzo, 2013 at 6:20

    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

    • kyo on 25 abril, 2013 at 5:46

    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

    • daniel on 27 mayo, 2013 at 17:45

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

    • RonnV on 4 junio, 2013 at 17:23

    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.

    • angel on 3 julio, 2013 at 21:16

    Buenas tardes;

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

    • angel on 3 julio, 2013 at 21:23

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

    • Cosmic on 5 octubre, 2013 at 9:31

    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 on 26 abril, 2014 at 18:13

    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

    • juan on 6 octubre, 2014 at 1:47

    “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

    • benji on 2 diciembre, 2014 at 15:43

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

    • Vile on 18 diciembre, 2014 at 15:03

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

    • Vile on 18 diciembre, 2014 at 17:38

    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.

    • Jose on 14 enero, 2015 at 19:58

    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?

    • David on 7 febrero, 2015 at 7:04

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

    • Mario on 9 febrero, 2015 at 14:57

    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

    • Vile on 9 febrero, 2015 at 15:31

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

    • edu on 27 febrero, 2015 at 19:33

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

    • Raphael on 3 abril, 2015 at 13:51

    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

    • Iván on 6 enero, 2016 at 12:04

    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.

    • Kyushudo on 26 febrero, 2016 at 15:10

    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,

    • Kyushudo on 26 febrero, 2016 at 15:13

    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,

    • txema on 4 marzo, 2016 at 20:53

    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

    • Vile on 7 marzo, 2016 at 10:17

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

    • Vile on 7 marzo, 2016 at 10:19

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

    • kyushudo on 10 marzo, 2016 at 8:15

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

    saludos

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

    • alvaro on 4 julio, 2016 at 20:16

    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

    • alvaro on 4 julio, 2016 at 20:45

    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

    • erick cedeno on 17 septiembre, 2016 at 20:33

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

    • Manu... on 14 noviembre, 2016 at 21:01

    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?

  4. Hola Manu,

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

    Un saludo

    • brian on 7 febrero, 2017 at 15:47

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

    • Ignacio on 2 abril, 2018 at 22:17

    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 un comentario

Your email address will not be published.