Cargando la página...

Hacer una "Ventana emergente controlada"

Publicado por André Karell Contreras Jiménez el 27/01/2010 en JavaScript - Nivel Básico

Tabla de contenidos

Avatar de

La tabla de contenidos pertenece al artículo completo y no al contenido parcial de cada página del mismo si fuese el caso.

Leer los comentarios.

Resúmen

Apesar de mi falta de imaginacion y vocabulario, XD, le puse asi por q se podria usar como una ventana, espero me entiendan a que me refiero.

Sobre el autor

Avatar de André Karell Contreras Jiménez

André Karell Contreras Jiménez tiene 19 años, vive en Mexico / Michoacan de Ocampo y su ocupación es Programador web.

Forma parte del club desde 17/06/2009 a las 15:30 habiendo estado en linea 16/03/2011 a las 03:42 por última vez.

Ha publicado 12 artículos en clubdesarrolladores con un promedio de valoración de 8.38 puntos. Puedes visitar su sitio web en http://andregeek.com

Estadísticas

  • Leido 2567 veces
  • Valorado 0.00 puntos

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

Si tiene alguna pregunta sobre éste artículo por favor deje un comentario y será respondido.

Descargas

No existen descargas asociadas

Comentarios

Sus comentarios son importantes.

Listado de comentarios

No hay comentarios para listar, si desea puede crear el primer comentario para este artículo.

Agregar un comentario

Debe estar identificado para agregar un comentario