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
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 8
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 2
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
K [CERCO] pagina Instagram Altri Annunci 0
C Vendo pagina FB Presentati al Forum 0
A [CERCO] Pagina Instagram Annunci servizi di Social Media Marketing 1
L Cerco pagina Instagram 1-2k Annunci servizi di Social Media Marketing 4
J creare pagina php di prenotazione PHP 5
Fendo59 Passare parametri con metodo POST a una pagina in un frame PHP 0
A Vendo pagina 8K Annunci servizi di Social Media Marketing 0
Michele95 vendo pagina instagram Annunci servizi di Social Media Marketing 1
B cerco pagina instagram Annunci servizi di Social Media Marketing 6
A [COMPRO] Pagina Instagram Compravendita siti e domini 0
V Cerco pagina Instagram Annunci servizi di Social Media Marketing 1
C Form email php su pagina index.html? PHP 21
A CERCO pagina instagram Social Media Marketing 1
L Creare una pagina pre-home WordPress 1
ScofieldMJ [CERCO] Pagina Instagram e Canale Telegram Annunci servizi di Social Media Marketing 0
Cosina Reindirizzare a nuova pagina dopo echo copy PHP 4

Discussioni simili