Ciao a tutti,
vorrei fare in modo che al click di un pulsante (o di un altro oggetto HTML) il fondo della pagina diventi semitrasparente e compaia un'immagine di caricamento (non necessariamente quest'ultima cosa) tipo http://www.huddletogether.com/projects/lightbox/
:master:
Lo sfondo della pagina non accetta l'opacità/trasparenza
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Forse mi sono spiegata male... in realtà il semitrasparente lo volevo creare con un'immagine pgn... ho trovato questa spiegazione ma non riesco ad applicarla SOLUZIONEOriginariamente inviato da cavicchiandrea
Lo sfondo della pagina non accetta l'opacità/trasparenza
in particolare non capisco questo punto:
e come fare la funzione mostra/nascondi :master:Codice PHP:margin-left: -AAA; margin-top: -BBB; /* a cui sottrarre la metà di AA e BB */
e cosa centra il javascript? E' un problema css, oltre tutto perfettamente spiegato, ti faccio un esempio:
width: 100px;//larghezza del tuo div
height: 200px;//altezza del tuo div
margin-left: -50px; margin-top: -100px; /* cioè dividi a metà i due dati A/L */
la funzione mostra e nascondi che c'è due righe + sotto l'hai provata?
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
non mi fare quella faccia ehOriginariamente inviato da cavicchiandrea
width: 100px;//larghezza del tuo div
height: 200px;//altezza del tuo div
margin-left: -50px; margin-top: -100px; /* cioè dividi a metà i due dati A/L */
la funzione mostra e nascondi che c'è due righe + sotto l'hai provata?
e della funzione che mi dici?
un esempiuccio no eh?!?Codice PHP:// Parametro vero -> true = visibile; false = invisibile
function mostra(vero)
{
document.getElementById(”box_popup_che_deve_comparire”).style.display=vero?”block”:none;
}
Invece di fare l'offesa cerca d'essere + collaborativa, quello che hai posto e la funzione mostra e nascondi cosa vuoi sapere come attivalo?
apri div o cosa?
Le nozioni basilari si posso benissimo imparare leggendo una qualsiasi guida, e si danno per scontate.
Comunque visto che sei cosi sensibile ti auguro di risolvere
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Veramente scherzavo... cercherò di fare un pò di prove.Originariamente inviato da cavicchiandrea
Invece di fare l'offesa cerca d'essere + collaborativa...
Grazie comunque per la pazienza
Continuo a sbagliare qualcosa:
Codice PHP:<!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=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#coprente {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(overlay.png) repeat;
z-index: 30; /* o cmq il numero più alto tra quelli degli altri z-index presenti */
}
#box_popup_che_deve_comparire {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px; margin-top: -50px; /* a cui sottrarre la metà di AA e BB */
}
</style>
<script language="javascript">
// Parametro vero -> true = visibile; false = invisibile
function mostra(vero)
{
document.getElementById('box_popup_che_deve_comparire').style.display=block;
}
else
{
document.getElementById('box_popup_che_deve_comparire').style.display=none;
}
</script>
</head>
<body>
<div id="coprente">
<div="box_popup_che_deve_comparire">
... contenuto del box ...
[url="#"]apri div[/url]
</div>
</div>
</body>
</html>
...style.display="block";
...style.display="none";
Ora va meglio, però funziona solo al primo clic... poi ricevo l'errore "mostra is not function":
Codice PHP:<!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=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#coprente {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(overlay.png) repeat;
z-index: 30; /* o cmq il numero più alto tra quelli degli altri z-index presenti */
}
#box_popup_che_deve_comparire {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: 50px; margin-top: 50px; /* a cui sottrarre la metà di AA e BB */
}
</style>
<script language="javascript">
// Parametro vero -> true = visibile; false = invisibile
function mostra(vero) {
if(mostra = true){
document.getElementById('box_popup_che_deve_comparire').style.display="none";
//document.getElementById('box_popup_che_deve_comparire').style.background='#FFFFFF';
}
if(mostra = false){
document.getElementById('box_popup_che_deve_comparire').style.display="block";
//document.getElementById('box_popup_che_deve_comparire').style.background='#FFFFFF';
}
}
</script>
</head>
<body>
<div id="box_popup_che_deve_comparire">
... contenuto del box ...
</div>
<div id="coprente">
[url="#"]SCURISCI[/url]
<a id="mostr" href="#" onclick="mostra(false);" style="color:#FFFF00">TOGLI TRASPARENZA</a
</div>
</body>
</html>
Permessi di invio
Rispondi quotando