generar un display

[xlos_mas_pro]

Lo que pasa es que tengo un menu hecho en un ul con sus respectivos li pero quiero que al apretar un li en vez de entrar a un link se genere un ventana que se encontraba oculta ahora se muestre al hacerle click al li pero que solo se cierre si es que un haci un click fuera de la ventana que se abrio.

La ventana la tengo hecha en css lista lo que quiero hacer que al hacer click en el li se muestre con un display block y al hacer click fuera de la ventana un display none

[rossijona]

Lo primero:
( display: block para la ventana ).

el script debe ser asi:

<script>
$('clase_del_li').click(function({
$('clase_del_div').fadeIn('slow');
});
</script>

Ahora por otro lado, para cerrar el DIV:

<script>
var over = false;

$('clase_del_div').hover(function(){
over = true;
}, function(){
over = false;
});

$('body').click(function(){

if ( over == false )
{
$('clase_del_div').fadeOut('slow');
}

});
</script>


De esta forma lo que hago es crear una variable FALSE y le digo que si estoy parado arriba del div la variable sera TRUE al mismo tiempo digo que si hago click en BODY y si la variable OVER es FALSE ( osea que no estoy sobre el div ), el div se cerrara.

Asi que el total del cod es el siguiente:

Código:

<script>
$('clase_del_li').click(function({
  $('clase_del_div').fadeIn('slow');
});

var over = false;

$('clase_del_div').hover(function(){
  over = true;
}, function(){
  over = false;
});

$('body').click(function(){

if ( over == false )
{
$('clase_del_div').fadeOut('slow');
}

});
</script>

[xlos_mas_pro]

Muchas Gracias pero solo una cosa quiero que cuando se muestre la ventana al pasar el mouse por ensima solo se cierre la ventana si es que uno hace un click fuera de ella no si es que saca el mouse

[Dafonz]

La clave esta en event.stopPropagation(); (Asumo que estas usando JQuery por que probaste la anterior respuesta)

Para mostrar es normal:

Código Javascript:

$('clase_del_li').click(function(event){
    event.stopPropagation();
    $('clase_del_div').show()
});
 

Para ocultar:

Código Javascript:

$(document).click(function() {
    $('clase_del_div').hide()
});
 

Aplica igual para javascript puro si es como lo estas haciendo... la idea es que cuando se le de click en el elemento que quieres que muestre lo tome como a parte del todo.. sin que haga eventBubbling y se vaya hasta el document.. por eso paras la propagación del evento, entonces así al darle click solo ejecuta su función mientras que en cualquier otra cosa de document (es decir cualquier otra cosa que no tenga la propagación "apagada") ejecutara la otra función que es cerrar

[rossijona]

Iniciado por xlos_mas_pro

Muchas Gracias pero solo una cosa quiero que cuando se muestre la ventana al pasar el mouse por ensima solo se cierre la ventana si es que uno hace un click fuera de ella no si es que saca el mouse

No entendi lo que me acabas de decir.

De esta forma el div solo se cierra si haces click fuera de el.

[xlos_mas_pro]

mira para que lo entientas mejor quiero hacer un tooltip al los li de un ul pero no al pasar el mause sino que al hacerle click aparesca el tooltip y para cerrarlo hacer click fuera del tooltips

[xlos_mas_pro]

Iniciado por Dafonz

La clave esta en event.stopPropagation(); (Asumo que estas usando JQuery por que probaste la anterior respuesta)

Para mostrar es normal:

Código Javascript:

$('clase_del_li').click(function(event){
    event.stopPropagation();
    $('clase_del_div').show()
});
 

Para ocultar:

Código Javascript:

$(document).click(function() {
    $('clase_del_div').hide()
});
 

y para ponerlo en el codigo html que le tengo que poner al li un onclick ? ?

mira

Código HTML:

<ul id="pasos">
   <li>
     texto
       <span>otro texto</span><!-- quiero que esto se muestre cuando se hago click al li y que quede en la pantalla hasta que no se genere otro click en la pantalla -->
 
me explico ahora ? 
   </li> 
 
 
</ul>
 

Aplica igual para javascript puro si es como lo estas haciendo... la idea es que cuando se le de click en el elemento que quieres que muestre lo tome como a parte del todo.. sin que haga eventBubbling y se vaya hasta el document.. por eso paras la propagación del evento, entonces así al darle click solo ejecuta su función mientras que en cualquier otra cosa de document (es decir cualquier otra cosa que no tenga la propagación "apagada") ejecutara la otra función que es cerrar

[rossijona]

Si entras aquí

http://uruguayaca.com/

verás que arriba hay ciertas categorías como Arte y Cultura, Comercio e Industria, etc... si haces click en cualquiera de estas categorías se abre un globo y si en ese globo das en "Buscar" hago lo que te digo.

Fijate si es eso lo que buscas o algo similar.

[xlos_mas_pro]

si es eso exactamente lo que busco y si te das cuenta cuando el globo no se cierra hasta que se haga un click fuera de el eso mismo es lo que quiero pero con una diferencia quiero situar el globo no en la imagen sino en medio de la pantalla

[rossijona]

Exacto, eso lo hice de la forma que te puse arriba.

Cree una variable con el valor "false"

y puse que cuando estoy ensima del globo la variable cambie a "true".

Eso por un lado, por otro lado digo que si hago click en body ( osea toda la web, el globo se cierre, pero antes de eso compruebo si la variable es "false" ).

Conclución el globo se cierra si hago click en body pero no estoy ensima del globo.

Lo de situar el div al medio centrado es algo así:

a modo de ejemplo:

Si tienes un div de 100px X 100px y lo quieres centrar en el medio de la pantalla debes de colocarlo con posicion absolute
a 50% de left
y a 50% de top

y le das margin-top -50px
y margin-left -50px.

el cod queda css es:

Código:

clase_del_div
{
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px; /*al margen top le restas la mitad de su alto*/
margin-left: -50px; /*al margen left le restas la mitad de su ancho*/
}

Y si quieres que este div se mueva con el scroll y dejarle el fondo oscuro semitransparente, debes de crear un div padre con width 100%, height 100% y position fixed con el background del png semitransparente

[xlos_mas_pro]

Iniciado por rossijona

Si entras aquí

http://uruguayaca.com/

verás que arriba hay ciertas categorías como Arte y Cultura, Comercio e Industria, etc... si haces click en cualquiera de estas categorías se abre un globo y si en ese globo das en "Buscar" hago lo que te digo.

Fijate si es eso lo que buscas o algo similar.

Si eso es exacatamente lo que quiero hacer pero

[rossijona]

Me olvidaba que este div lo debes de crear antes de </body>

[rossijona]

Iniciado por xlos_mas_pro

Si eso es exacatamente lo que quiero hacer pero

Pero?

[xlos_mas_pro]

a pero eso que sale ahi es ese script que es el lightbox y ese script te abre otra pagina yo lo que quiero es que haga lo mismo pero con contenido que este en la misma pagina como un span que esta oculto con texto y que aparesca haci con ese efecto que me mostraste en la pagina uruguyaca.com al hacer click sobre el li

[rossijona]

Iniciado por xlos_mas_pro

a pero eso que sale ahi es ese script que es el lightbox y ese script te abre otra pagina yo lo que quiero es que haga lo mismo pero con contenido que este en la misma pagina como un span que esta oculto con texto y que aparesca haci con ese efecto que me mostraste en la pagina uruguyaca.com al hacer click sobre el li

No, no es lightbox esta hecho de la forma que te digo... aguardame un segundo que subo una muestra.

[Dafonz]

Probaste acaso lo que te puse es exactamente eso sin tener que meter banderas y eventos de sobra.. en lo que puciste:

Código Javascript:

$('#pasos li').click(function(event) {
            event.stopPropagation();
            $(this).children("span").show();
        });
        
        $(document).click(function() {
            $('#pasos li span').hide();
        });
 

Código HTML:

<ul id="pasos">
   <li>
     texto
       <span style="display:none">otro texto</span>
   </li> 
</ul>
 

Al darle click en li se muestra, al darle click en todo lo que no este dentro del li se cierra... o ya de perdido si vas a usar funciones extras utilizar mouseenter que over se dispara muchisimas veces mas de las necesarias..

[rossijona]

Aquí tienes el ejemplo:
http://glamoureventos.site90.net/html/

y aquí lo descargas:

http://glamoureventos.site90.net/html/html.rar

Saludos y suerte!