Div flotante, estilo anuncio emergente.

[ZoroRoronoa]

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

[cristian_cena]

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:

<div id="emergente">
<div id="emergente_content">
<a id="close" href="javascript:void(0);">[x] cerrar</a> <!-- javascript:void(0) para que no zapatee cuando pinchamos el enlace-->
<p>... contenido ...</p>
</div>
</div>
 

Código CSS:

#emergente{position:absolute; top:...; left:...; width:...; height:...;} /*o fixed segun tu diseño*/
#emergente_content{position:relative;} /*para que nos obedescan top y right de #close*/
#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*/
/*todos los demás estilos que quieras darle serán según la estetica de tu diseño*/
 

Código Javascript:

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

Espero te sirva. un saludo.

[ZoroRoronoa]

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

Saludos.

[ZoroRoronoa]

Amigo, pues no me funciono

[cristian_cena]

postea como lo implementaste y lo vemos entre todos. abrazo

[ZoroRoronoa]

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