Lightbox che si chiude dopo refresh di pagina

**cigno** · 31-01-2013, 11:34

Ciao a tutti.

Io ho un lightbox (div opaco di sfondo + div centrale con i contenuti) che si apre al click di un pulsante.

Quando il lightbox è aperto se clicco "aggiorna" quest'ultimo si chiude... non capisco il perchè!!

All'onclick richiamo questa funzione, in teoria quando il lightbox è aperto dovrebbe essere settato su block... non capisco perchè si chiuda!

function displayHideBox(boxNumber)
{
if(document.getElementById("LightBox"+boxNumber).s tyle.display=="none") {
document.getElementById("LightBox"+boxNumber).styl e.display="block";
document.getElementById("grayBG").style.display="b lock";
document.getElementById("body").style.overflow="hi dden";
} else {
document.getElementById("LightBox"+boxNumber).styl e.display="none";
document.getElementById("grayBG").style.display="n one";
document.getElementById("body").style.overflow="vi sible";
}
}

**cavicchiandrea** · 31-01-2013, 12:49

E' normale le modifiche (apertura di un div, oscuramento pagina, etc...) del documento avvengo in maniera visiva (solo a schermo) non fisico cioè effettive nel documento, pertanto al refresh la pagina viene mostrata come in origine, per ovviare devi impostare un cookie all'apertura del lightbox e leggerlo tutte le volte che carichi/aggiorni la pagina

**carlomarx** · 31-01-2013, 20:43

Puoi sfruttare il CSS senza javascript per far sì che il tuo lightbox resti aperto anche dopo un refresh. Ti giro un codice di esempio. È fatto piuttosto di corsa, quindi i colori e il look in generale possono essere migliorati parecchio

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina bianca</title>
<style type="text/css">
div.lightbox {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

div.lightbox:target {
	display: table;
}

div.lightbox figure {
	display: table-cell;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

div.lightbox figure figcaption {
	display: block;
	margin: 0;
	padding: 8px;
	background-color: #ffccdd;
	height: 300px;
	margin: auto;
	position: relative;
	overflow: auto;
	border: 1px #000000 solid;
	border-radius: 10px;
}

div.lightbox figure .closebox {
	display: block;
	margin: auto;
	height: 0;
	overflow: visible;
	text-align: right;
	z-index: 5001;
	cursor: default;
}

div.lightbox figure .closebox, div.lightbox figure figcaption {
	width: 300px;
}

.closebox::after {
	position: relative;
	display: inline-block;
	content: "\00D7";
	z-index: 5002;
	color: #ffffff;
	border: 1px #ffffff solid;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	margin: 0;
	right: -20px;
	top: -10px;
	background-color: #000000;
	font-weight: bold;
	cursor: pointer;
}

.closebox::before {
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.85;
}
</style>
</head>

<body>



Testo di esempio. Blablablabla</p>

<div class="lightbox" id="esempio1">
	<figure>
		
		<figcaption>Questo &amp;egrave; un testo di esempio</figcaption>
	</figure>
</div>

<div class="lightbox" id="esempio2">
	<figure>
		
		<figcaption>Questo &amp;egrave; un altro testo di esempio</figcaption>
	</figure>
</div>



Testo di esempio. Blablablabla</p>



Apri finestra di esempio n. 1</p>



Testo di esempio. Blablablabla</p>



Apri finestra di esempio n. 2</p>

</body>

</html>

**carlomarx** · 31-01-2013, 20:45

EDIT: questo secondo messaggio è stato scritto per errore.

**carlomarx** · 01-02-2013, 01:32

Mi è venuto troppo carino

così non ho potuto fare a meno di aggiungere un esempio simile su MDN…
[ demo | articolo ]

**cigno** · 04-02-2013, 10:06

Mi è venuto troppo carino così non ho potuto fare a meno di aggiungere un esempio simile su MDN…[ demo | articolo ]

Si bello grazie ma sul ie7/8 non va. E poi su safari per iphone il box viola viene centrato e non tagliato.

Grazie comunque.

**carlomarx** · 04-02-2013, 14:10

Nei browser vecchi in cui non funziona la vedo dura incastrarcelo. Ma ho usato gli standard. Di conseguenza sarà destinato a funzionare in tutti i browser... in futuro

Discussione: Lightbox che si chiude dopo refresh di pagina

Strumenti discussione

Ricerca discussione

Visualizza

Lightbox che si chiude dopo refresh di pagina

Permessi di invio