Foros del Web » Creando para Internet » Diseño web »

Div flotante, estilo anuncio emergente.

Estas en el tema de Div flotante, estilo anuncio emergente. en el foro de Diseño web en Foros del Web. Hola amigos. tengo varias web, una de ellas es http://flezha.com, la cual es de un staff de vblogers para hacerlos reír, apenas empezamos, los videos ...
  #1 (permalink)  
Antiguo 08/04/2011, 21:23
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Div flotante, estilo anuncio emergente.

Hola amigos.
tengo varias web, una de ellas es http://flezha.com, la cual es de un staff de vblogers para hacerlos reír, apenas empezamos, los videos no son buenos...

Pero el motivo de poner esto es:
Que quiero saber si es posible, o mejor dicho, como agregar un div flotante con informacion dentro y que este se pueda cerrar. (creo que se hace con un script jquery), no estoy seguro.

Y bueno lo quiero utilizar con varias finalidades, quiero ponerlo para cuando haya una notica nueva o novedad, poner el codigo en mi index, y cuando los usuarios entren les aparesca este cuadro o div, con la informacion que yo les proporciones, que pudiera ser.

-Informacion (texto)
-Un link
-Un video
-etc...

Ojala y me ayuden, me hechen una manita :)
Saludos...!!!
__________________
Programador jQuery & PHP
  #2 (permalink)  
Antiguo 09/04/2011, 03:19
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Div flotante, estilo anuncio emergente.

Hola zoro, no he probado el siguiente código pero creería que te va a funcionar, pruébalo y me cuentas.

Código HTML:
Ver original
  1. <div id="emergente">
  2. <div id="emergente_content">
  3. <a id="close" href="javascript:void(0);">[x] cerrar</a> <!-- javascript:void(0) para que no zapatee cuando pinchamos el enlace-->
  4. <p>... contenido ...</p>
  5. </div>
  6. </div>

Código CSS:
Ver original
  1. #emergente{position:absolute; top:...; left:...; width:...; height:...;} /*o fixed segun tu diseño*/
  2. #emergente_content{position:relative;} /*para que nos obedescan top y right de #close*/
  3. #close{position:absolute; top:0; right:0; display:block; width:...; height:...;} /*convertimos a bloque al enlace y le damos position absolute para hubicarlo en la esquina superior derecha*/
  4. /*todos los demás estilos que quieras darle serán según la estetica de tu diseño*/

Código Javascript:
Ver original
  1. // ... y con jquery ...
  2. $(document).ready( // para que se ejecute cuando termina de cargar la página
  3.     $('#emergente').fadeIn('slow'); // aparece la caja, despacito = slow, tambien puedes usar números
  4.     $('#close').click(function(){ // cuando hacemos click en #close
  5.         $('#emergente').fadeOut(500) // desaparece en 500ms, fadeOut = display:none + efecto difuminado.
  6.     });
  7. );

Espero te sirva. un saludo.
  #3 (permalink)  
Antiguo 09/04/2011, 12:05
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Div flotante, estilo anuncio emergente.

Ok gracias...!!
Lo calaré a ver que sale, y te cuento como funcá.

Saludos.
__________________
Programador jQuery & PHP
  #4 (permalink)  
Antiguo 09/04/2011, 14:20
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Div flotante, estilo anuncio emergente.

Amigo, pues no me funciono
__________________
Programador jQuery & PHP
  #5 (permalink)  
Antiguo 09/04/2011, 18:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Div flotante, estilo anuncio emergente.

postea como lo implementaste y lo vemos entre todos. abrazo
  #6 (permalink)  
Antiguo 09/04/2011, 23:02
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Div flotante, estilo anuncio emergente.

bueno amigo, lo que no me funcionaba era la dar clic sobre la X
No hacia nada...!!

Y bueno, ya queria implementar esto, asi que al ver que no me funcó tu respuesta, me puse a buscar como loco por google, y encontre algo llamado jquery notice, y ahora uso esté.

Y pues no me queda otra que agradecerte por tu esfuerzo y ayuda (independientemente si esta bien o mal).

Gracias y Saludos
__________________
Programador jQuery & PHP

Etiquetas: emergente, estilo, flotante, anuncios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:00.