[SOLUCIONADO] Como lograr mensaje en botón usando jquery

joiscafo · #1 (**permalink**) 20/11/2012, 15:01

Que tal, he buscando pero no encuentro la respuesta, quisiera saber como se puede lograr el efecto de que al dar clic sobre un botón o un link aprezca una ventana, algo asi como cuando se hace este efecto en gmail.

Imagino es con jquery pero no se que función es para buscar información ejemplos he implementarla

Ojala me puedan guiar y gracias.

Saludos

Lanix_0 · #2 (**permalink**) 20/11/2012, 15:25

Hola, bueno yo echo algo de eso para la ventana o mejor dicho el diseño lo puedes lograr con css pero para la parte de que aparesca al precionar un boton salga es sencillo.

puedes ser algo asi

Código Javascript:

Ver original$(document).on('ready',function(){
    $('#miBoton').click(function(){$.abrirDialogo();});
);
 
$.abrirDialogo = function(){
   var left = $('#miBoton').offset().left; // Obtenesmo la posicion X
   var top = $('#miBoton').offset().top; //Obtenesmo la posicion Y
   var mar = $('#miBoton').outerHeight(); //Obtenemos el ancho del boton para darle margen al menu
 
    $('#miMenu').css({left:l,top:t,'margin-top':m});
     $('#miMenu').show();
}

Simplemente obtenemos la posicion del boton para posicionar ahi el menu

joiscafo · #3 (**permalink**) 20/11/2012, 15:30

Muchas gracias Lanix_0 deja lo pruebo, aunque tengo una duda #miMenu puede ser un <div> o que tipo de etiqueta debe de ser?

Lanix_0 · #4 (**permalink**) 20/11/2012, 15:35

si #miMenu vendria siendo el div que tiene el contenido en el caso de tu ejemplo la imagen y un botoncito de añardir cuenta

joiscafo · #5 (**permalink**) 20/11/2012, 15:46

Sigo molestando Lanix_0, segun como me lo planteas el codigo seria algo as:

Cita:

<html>
<head>
<title>Documento sin título</title>

<script src="jquery-1.4.2.min.js"></script>

<script>
$(document).on('ready',function(){
$('#prueba').click(function(){$.abrirDialogo();})
});

$.abrirDialogo = function(){
var left = $('#prueba').offset().left; // Obtenesmo la posicion X
var top = $('#prueba').offset().top; //Obtenesmo la posicion Y
var mar = $('#prueba').outerHeight(); //Obtenemos el ancho del boton para darle margen al menu

$('#pruebaD').css({left:l,top:t,'margin-top':m});
$('#pruebaD').show();
}

</script>

</head>

<body>

<input id="prueba" name="prueba" type="button" value="Abrir" />

<div id="pruebaD" name="pruebaD">prueba</div>

</body>
</html>

Pero no me funciona, estoy mal en el div, tiene que tener alguna característica css en especial?

Lanix_0 · #6 (**permalink**) 20/11/2012, 16:36

si pusites el css ??
prueba con este css para darle el efecto de flotante

Código CSS:

Ver original.menu-trip {
float: left;
z-index: 500;
position: absolute;
background: white;
border: 1px solid #D8D8D8;
padding: 10px 0px;
font-size: 13px;
cursor: default;
box-shadow: 1px -1px 10px #D8D8D8;
}

joiscafo · #7 (**permalink**) 20/11/2012, 16:45

Muchas gracias por tu tiempo Lanix_0 te lo agradezco.

Pues con el codigo de css lo acomoda al tamaño y todo y muy bien el problema es que cuando lo cargo me aparece y el boton no funciona no lo abre ni lo cierra.

Lanix_0 · #8 (**permalink**) 20/11/2012, 17:22

que te parece si me envias unas pantallas de tu depuracion del js a mi correo y lo seguimos.

[email protected]

joiscafo · #9 (**permalink**) 20/11/2012, 17:36

Lanix_0 gracias ya lo resolvi el del error era yo perdona deja ahorita subo el codigo por si alguien le sirve.

Gracias.

Lanix_0 · #10 (**permalink**) 20/11/2012, 17:44

creo que yo tambien me equivoque no cambie los nombres de las variables en la funcion de css
jejeje ok ok