box centrale a comparsa

**peppeocchi** · 30-03-2012, 01:39

Salve
come da oggetto devo creare un box a appare(e scompare) al centro della pagina.

In pratica, ho un menu, quando clicco su una voce di questo menù, lo sfondo diventa trasparente e il box appare in primo piano.

una funzione generica per far apparire e scomparire il box è:

codice:

function openMenu(){
  var d = document.getElementById("id-box");
  d.style.display = (d.style.display = "")? "none": "";
}

purtroppo questo codice non mi funziona...quindi ho fatto due funzioni una che lo apre e una che lo chiude, che si attivano alla pressione di due link (si apre cliccando sulla voce del menù, si chiude se clicco su chiudi dentro il box)

Problema 2: quando si apre il box vorrei disabilitare tutto quello che sta dietro (quindi tutta la pagina principale), cioè se si clicca in una qualunque parte fuori dal box, il box si chiude.

Per fare un esempio un po' più pratico, avete presente su facebook quando cliccate su una foto? si apre un box con l'immagine e cliccando fuori da questo box, si chiude e si torna alla pagina principale. La dinamica dovrebbe essere uguale.

Posto anche un po' del mio codice per rendere più chiara l'idea:

codice:

<head>
<script type="text/javascript" >
		function openMenu() {
			document.getElementById("tools").style.display="block";
			document.getElementById("page").style.opacity="0.1";
		}
		function closeMenu() {
			document.getElementById("tools").style.display="none";
			document.getElementById("page").style.opacity="1.0";
		}
	</script>
</head>
<body>
	
	<section id="tools">
		<header id=head-tools>
			<h1>TOOLS</h1>
		</header>
		<nav id=menu-tools>
			<ul>
				[*]link1
				[*]link2
			[/list]
		</nav>
		<footer id=foot-tools>
			<a onclick="closeMenu()">chiudi</a>
		</footer>
	</section>


	<section id="page">
		......
                
		<nav id=main-menu class=body>
			<ul>
				<li class=active><a href=#>HOME</a>
				[*]TOOLS
			[/list]
		</nav>

Questo codice fondamentalmente va bene, tranne per il fatto che devo usare le due funzioni separate per far apparire e scomparire il box. Inoltre vorrei "disabilitare" in qualche modo la pagina di sfondo come detto prima, cioè se si clicca fuori dal box, il box si chiude.

spero di aver fornito tutte le info necessarie, se serve altro chiedete pure, grazie

**Plopper** · 30-03-2012, 03:08

Usa il framework jquery

codice:

$('.classe del click').click(function () {
 $("#tools").css({ 'display' : 'block' });
$("#page").css({ opacity: 0.1 })});

$('.classe della chiusura').click(function () { close() });
$(document.body).click(function () { close() });

function close(){
$(document.body).ready(function () {
 $("#tools").css({ 'display' : 'none' });
$("#page").css({ opacity: 1.0 })});
}

Aggiustati il codice e includi jquery

**peppeocchi** · 01-04-2012, 04:00

grazie per la risposta...ho letto un po' di cose su jquery, ma non ho capito come usare quel codice...
ok includo il framework jquery
classe del click cosa sarebbe? devo assegnare una classe alla voce del menù che apre il box centrale?

codice:

<ul>
				<li class=active><a href=#>HOME</a>
				[*]TOOLS
			[/list]

classe della chiusura? la section page? così?

codice:

<section id="page" class="chiudi">

ho fatto in questo modo però non funziona, sicuramente una buona lettura su jquery mi chiarirà le idee, ma se puoi dirmi dove sbaglio te ne sarei grato

Discussione: box centrale a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

box centrale a comparsa

Permessi di invio