Introduccion XD

Bueno, despues de mi cortante inspiracion por culpa de telcel y su $%@& limite de 10 GB al mes con la "Banda Ancha de telcel" me cortaron el internet y mi antiguo proyecto lo dejo suspendido por el momento...

Ahora, prosigamos.

Introduccion 2

Si nadie entiende que es lo que hize/pongo/muestro les dejo el enlace:
http://andregeek.net/articulos/ventana-emer/ventana_emergente_controlada.html

Si curiosearon un poco en la pagina, veran q al poner el mouse sobre "Panel de usuario" sale un cuadro que pueden poner informacion, links, un login, etc.

codigo

Ahora explicare, esta hecho con jquery y aqui tenemos el codigo:

$(function() {

	$("#contenido").hide();					   

	$('#activador').mouseover(function () {

      if ($("#contenido").is(":hidden")) {

        $("#contenido").slideDown("slow");

      } 

        $('#boton').click(function(){

									$('#contenido').slideUp("slow");

									});

      

    });						

							});

1.- Primero ocultamos el div contenido.
2.- Le aplicamos la funcion de mouseover o caundo el mouse este encima del elemento, en este caso el div.
----a.- Ahora, dentro de la funcion, ponemos un if de que si el contenido esta oculto, el contenido, se muestra con un efecto hacia abajo, lento.
3.- aparte, ponemos que cuando se de click en el div, boton, de oculte el div contenido.

ahora va el HTML.

<div id="activador">Panel de Usuario</div>



<div id="contenido">

  <div id="boton" style="background-color:#F00; width:14%;"><font color="#FFFFFF">Cerrar</font></div>

Probando, esto vera el usuario, podria ser para loguear, ver mensajes, etc.</div>

Finalmente el CSS

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

#activador {

	position:absolute;

	left:80%;

	top:0px;

	width:103px;

	height:3%;

	z-index:1;

	background-color: #000000;

	color: #FFF;

}

#contenido {

	position:absolute;

	left:70%;

	top:3%;

	width:320px;

	height:100px;

	z-index:2;

	background-color:#36F;

}

si te sientes mas comodo con un ejemplo ya armado, aqui esta el .zip

Es muy facil poner un boton en vez de las letras: cerrar, o tambien poner un animate, etc. Si ocupan un ejemplo en especifico, pueden dejar su comentario :)