Div flotante, estilo anuncio emergente.

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