Hacer que aparezca un div al clicar en un enlace

oriolforcada · #1 (**permalink**) 01/11/2014, 02:38

Hola a todos,
he estado buscando por internet, y he encontrado algunos, pero quiero que para volverlo a cerrar le tengas que dar en algun lugar fuera del div o en el enlace con el que lo has abierto.

Gracias de antemano
Oriol

MaNuX0218 · #2 (**permalink**) 01/11/2014, 02:46

Para cerrarlo clikeando fuera del div o dandole a cualquier parte puedes asignarlo al body por ejemplo.

Código Javascript:

Ver originalfunction CerrarDiv(){
document.getByElementId("nombre_div").style.display = "none";
}

Código HTML:

Ver original<body onClick="CerrarDiv();">

Saludos.

caricatos · #3 (**permalink**) 01/11/2014, 02:55

Hola:

Digo yo, ¿Porqué un enlace?, si evidentemente tu intención no es enlazar...

Te aconsejo usar un botón, que semánticamente es el elemento más aconsejable para estas ocasiones... luego con estilos puedes darle cualquier apariencia... hasta la de los enlaces...

En línea, sería algo así:

<button type="button"
onclick="document.getElementById('mi_div').style.d isplay = (document.getElementById('mi_div').style.display == 'none') ? 'block':'none'" >
efecto
</button>
<div id="mi_div" style="display: none">

</div>

Saludos

oriolforcada · #4 (**permalink**) 01/11/2014, 13:24

Hola, he probado una combinación de los dos códigos y no me ha funcionado:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
    function CerrarDiv(){
    document.getByElementId("mi_div").style.display = "none";
    }
	</script>
</head>

<body onClick="CerrarDiv();">

<button type="button" onclick="document.getElementById('mi_div').stylr.d isplay = (document.getElementById('mi_div').style.display == 'none') ? 'block':'none'" >
efecto
</button>
<div id="mi_div" style="display: block">
Hola
</div>

</body>
</html>

Por cierto, no tengo ni idea de javascript.
Gracias
Oriol Forcada

caricatos · #5 (**permalink**) 01/11/2014, 16:55

Hola:

Código:

he probado una combinación de los dos códigos y no me ha funcionado

...

Código:

Por cierto, no tengo ni idea de javascript.

¡Sin palabras!

... ¿Y sin mezclas...?

Saludos

MaNuX0218 · #6 (**permalink**) 02/11/2014, 02:27

Devería quedarte de está manera:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
function AbrirDiv(){
    document.getByElementId("mi_div").style.display = "block";
    }
    
function CerrarDiv(){
    document.getByElementId("mi_div").style.display = "none";
    }
    </script>
</head>
 
<body onClick="CerrarDiv();">
 
<button type="button" onclick="AbrirDiv()" >
efecto
</button>
<div id="mi_div" style="display:none">
Hola
</div>
 
</body>
</html>

Esto aria que cuando haces clic en el boton lo muestre y si aces clic fuera se cierre.

Saludos.

IsaBelM · #7 (**permalink**) 02/11/2014, 07:51

Cita:

Iniciado por MaNuX0218

Devería quedarte de está manera:

.............

Esto aria que cuando haces clic en el boton lo muestre y si aces clic fuera se cierre.

Saludos.

esa es una manera poco eficiente de hacerlo. a cada click en el body se invocará la función

oriolforcada · #8 (**permalink**) 02/11/2014, 10:42

MaNuX0218, he probado tu código y no me ha funcionado, pero creo, que si la funcion para cerrar el div esta aplicada a todo el body, entonces si le das dentro del div desplegable tembien se cerraría no? Se podria hacer que fuera dandole fuera del div solo.
Gracias
Oriol