Oscurare pagina con popup interno?

hackersatifal · 25 Set 2012

Salve a tutti,
volevo fare in modo che apparisse in un sito web un popup interno alla pagina(come se fosse un div) ovvero non in un pagina esterna e ho fatto cosi, ma non mi si posiziona al centro della pagina e poi come faccio ad oscurare il resto della pagina?
Ecco come avevo provato (il fatto di mostrare o meno il div funziona, ma come faccio a posizionarlo al centro della pagina e a bloccare il resto della pagina?):

HTML:

<a href="#" onclick="document.getElementById('uno').style.visibility ='visible'; document.getElementById('nascondi').style.visibility ='visible';">uno</a>
...

<div id="uno" style="visibility:hidden; position: relative;
  top: 50%; left: 50%;
  width: XX; height: YY;
  margin-left: -XXX; margin-top: -YYY; display: block; hidden "> ciao
<a href="#" id = "nascondi" onclick="document.getElementById('uno').style.visibility ='hidden'; document.getElementById('nascondi').style.visibility ='hidden'" style="visibility:hidden">nascondi</a></div>

Grazie a tutti in anticipo per il vostro aiuto,
cicciaramba.

hackersatifal · 26 Set 2012

Non preoccupatevi: ho risolto :mavieni:

criric · 26 Set 2012

Siamo curiosi ..
come hai fatto?

Vale2 · 26 Set 2012

criric ha scritto:
Siamo curiosi ..
come hai fatto?

Ciao criric

un esempio:

Codice:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Offuscamento pagina e Div al centro</title>
<style type="text/css">
a:link {font-family:verdana; font-size:16px; color:#333399; text-decoration:none;font-weight:bold}
a:visited {font-family:verdana; font-size:16px;color:#333399; text-decoration:none ;background-color:#aaaaff;font-weight:bold}
a:hover{font-family:verdana; font-size:16px;color:#ff0000; text-decoration:none;background-color:#aaaaff;font-weight:bold}

body { 
margin: 0;
}

#offusca {
position: absolute;
background-color: #000000;
width: 100%;
height: 100%;
margin: 0 0 0 0;
filter:alpha(opacity=50); /* IE/Win */
opacity: 0.5; /* Safari 1.2, più recente Firefox e Mozilla, CSS3 */
-moz-opacity:0.5; /* Più vecchio di Firefox 0.9 */
-khtml-opacity: 0.5; /* Safari 1.x (pre WebKit!) */
KHTMLOpacity:0.5; /* Safari <1.2, Konqueror */
MozOpacity:0.5; /* Più vecchio di Mozilla e Firefox */
display: none;
z-index: 1;
}

</style>
</head>
<body bgcolor="#FFFFFF">

<div id="offusca"></div>
<div id="miodiv" style="position:absolute;width:400px;height:400px;top:50%;left:50%;margin-left:-200px;margin-top:-200px;display:none;text-align:center;border:2px solid #000000;background-color:#ffffff;z-index:2"> 
<div id="chiudimiodiv" style="position:absolute;display:none;top:4px;left:3px;z-index:3">
<a href="javascript:void(0)" onclick="body.style.overflow='auto';document.getElementById('offusca').style.display='none';document.getElementById('miodiv').style.display='none'">Chiudi</a>
</div>
<br>
<font face="Verdana" size="6">Benvenuto<br>
<br>
Welcome<br>
<br>
<br>
</font></div>

<br><div align="center">
<a href="javascript:void(0)" onclick="body.style.overflow='hidden';document.getElementById('offusca').style.display='block';document.getElementById('chiudimiodiv').style.display='block';document.getElementById('miodiv').style.display='block';">Apri Div</a>
</div>



</body>
</html>

esempio online

http://www.vale2.org/esempio/

Valeria.

criric · 26 Set 2012

Grazie Vale :fonzie: stasera me lo guardo

Cerca

Cerca

Oscurare pagina con popup interno?

hackersatifal

Utente Attivo

hackersatifal

Utente Attivo

criric

Super Moderatore

Vale2

Utente Attivo

criric

Super Moderatore

Discussioni simili