Oscurare pagina con popup interno?

hackersatifal

Utente Attivo
9 Ago 2012
238
0
0
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Siamo curiosi ..
come hai fatto?
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Grazie Vale :fonzie: stasera me lo guardo
 
Discussioni simili
Autore Titolo Forum Risposte Data
jwebcode [risolto] oscurare sito PHP 4
F [RISOLTO]oscurare momentaneamente oggetto del database PHP 38
S oscurare momentaneamente sito e perdita di posizionamento SEO e Posizionamento 3
G Pagina html in stringa PHP 2
L Creare ancore interne alla pagina PHP 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
Shyson Regex che trova la parola nella pagina jQuery 6
L Eliminazione di una pagina dalla gallery SEO e Posizionamento 0
D Apre il lightbox fuori pagina Javascript 0
K posizionare variabile da pagina html all'iframe. Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
U Link a pagina ed esecuzione file PHP 0
S Passare query o utm alla pagina successiva Domini 1
D [Cerco] Pagina Facebook settore calcio Annunci servizi di Social Media Marketing 0
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
G Eliminare l'effetto refresh di una pagina internet PHP 8
L Bing prima pagina prima riga; Google mi ignora SEO e Posizionamento 0
P Pagina modifica record che non funziona PHP 0
T Conferma reload pagina Javascript 4
A Submit senza ricaricare la pagina Ajax 2
L Problemi form Pagina php HTML e CSS 3
L php mysql cerca e visualizza pagina PHP 0
S Variabile in post su altra pagina PHP 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
D Pagina non trovata Wordpress WordPress 7
E Pagina Cloudflare e captcha Domini 1
W Anomalia Pagina Facebook Social Media Marketing 9
A Aiuto per pagina php PHP 0
T Risolto Redirect a pagina esterna Javascript 2
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
T Offuscare link pagina web PHP 2
D Stampa a video in altra pagina html Database 3
Cosina script data aggiornamento pagina Javascript 1
Y cambiare sfondo di una pagina Javascript 1
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
S Apertura in una nuova pagina PHP 6
G creazione menu a tendina e invio a pagina php PHP 1
B Stampare una porzione della pagina PHP 0
D Pubblicità Instagram su pagina da 144 mila follower Vendere e Acquistare pubblicita' online 3
A Dare l'accesso ad una pagina solo ad un utente specifico PHP 0
F pagina dinamica PHP PHP 3
W Invio Dati ad un altra pagina Classic ASP 1
Samuele Ronzani Click e reload della pagina PHP 1
M Compilazione automatica campi in input stessa pagina PHP 0
C Statistiche pagina Facebook aziendale Social Media Marketing 2
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
MarcoGrazia Pagina canonical SEO e Posizionamento 0
elpirata Update dinamico informazioni scritte in una pagina php jQuery 11
C Vendo pagina FB Presentati al Forum 0
A [CERCO] Pagina Instagram Annunci servizi di Social Media Marketing 1

Discussioni simili