Anzichè un popup, un div!

[Igreo]

Sappiamo del fatto che esiste un blocco popup.. a questo punto perciò entra in campo l'oggetto DIV.. ebbene la domanda è la seguente:

Qual'è un metodo assolutamente crossbrowser e possibilmente facile per piazzare un div sopra il nostro document (position:assolute!?) in posizione pressapoco centrale, con il link chiudi div e qualcosa all'interno?

Grazie come sempre e a presto!!!

[Mega69]

Visto l'enorme ricorrenza di questo tipo di domanda ho deciso di scrivere una guida su come farlo nel modo più semplice e compatibile possibile.
http://blogmega.splinder.com/tag/overlay

L'unica cosa da correggere è che ho usato codice javascript inline

[whisher]

Ciao.
A parer mio otteei tramite js
i valori per top e left/right
con un codice del tipo:

var centerwidth=Math.floor((screen.width/2)-(x/2));
var centerheight= Math.floor((screen.height/2)-(y/2)); 

poi

var div=document.createElement('div');
div.style.position='absolute';
div.style.top=centerheight+'px';
 div.style.left=centerwidth+'px';
document.getElementsByTagName('body')[0].appendChild(div); 

etc .............

per quanto riguarda position mi sembra supportata
bene da ie 4 in poi guarda qui

[br1]

Originariamente inviato da whisher

var centerwidth=Math.floor((screen.width/2)-(x/2));
var centerheight= Math.floor((screen.height/2)-(y/2)); 

Non puoi ricavare il centro della finestra misurando lo schermo...

ciao

[Mega69]

Originariamente inviato da whisher


per quanto riguarda position mi sembra supportata
bene da ie 4 in poi guarda qui

Mi riferivo al margin auto; questo non credo proprio sia supportato da IE 5.5.

[Igreo]

Scusate ma il vertical-align:middle FUNZIONA? ^^''

A me pare proprio di no... se piazzo un table all'interno di due div di cui il primo ha la funzione style="vertical-align:middle;" non succede proprio niente e il table mi si piazza proprio come se fosse top, cioè in alto! mha..


Inoltre vi faccio vedere la mia prova non funzionante:

CSS_

#con-overlay {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width:100%;
    height:1%;
    text-align:center; /*per IE 5.5 o minore*/
    background:transparent;
}
#overlay {
    position:relative;
    top:50px;
    display:block;
    margin:0px auto;
    width:500px;
    height:400px;
    background:#ff0000;
} 

BODY_

<div id="con-overlay">
<div id="overlay">
<P align="right">
[url="javascript:void(0);"][B]X[/B] Chiudi[/url]
</P>
<CENTER>
<H1>DIGREO SITE</H1>
<DIV id="sal_init">
</DIV>
<H3 class="sb" align="center">E-mail:digreo@hotmail.it</H3>
<DIV id="messages">

</DIV>
</CENTER>
</div>
</div> 

JAVASCRIPT ESTERNO_

function apertura() {
    if (document.getElementById('overlay')) document.getElementById('overlay').style.display='block';
    if (document.getElementById('sal_init')) document.getElementById('sal_init').innerHTML='<P class="bnu">BENVENUTI nella nostra Bottega Universale!<\/P>';
    //if (document.getElementById('messages')) document.getElementById('messages').innerHTML= getMessage();
    setTimeout("if (document.getElementById('overlay')) document.getElementById('overlay').style.display='none'",6000);
}
setTimeout("apertura();", 5000); 

Dove sbaglio?

[whisher]

Non puoi ricavare il centro della finestra misurando lo schermo...

si che oggi sono un po abbelinato
ma una cosa del genere:

<script language="JavaScript" type="text/JavaScript">
    function createDiv(w,h,t,p,bg){
    var centerwidth=Math.floor((screen.width/2)-(w/2)); 
    var div=document.createElement('div');
    div.style.width=w+'px';
    div.style.height=h+'px';
    div.style.position='absolute';
    div.style.top=t+'px';
    div.style.left=centerwidth+'px';
    div.style.padding=p+'px';
    div.style.border='1px solid #000';
    div.style.backgroundColor='#'+bg;
    document.getElementsByTagName('body')[0].appendChild(div);
}
window.onload=function(){
    createDiv(200,100,20,5,'0f0');
}
</script> 

[Igreo]

In pratica credo che BR1 ti ha detto quella frase perchè non puoi sapere se l'utente ha la finestra di windows aperta a tutto schermo.. perchè se così non fosse, non ha significato prendere la metà dello schermo! Metti il caso uno ha la finestra in basso a sinistra e grande 300x400 ..

[whisher]

Originariamente inviato da Igreo
In pratica credo che BR1 ti ha detto quella frase perchè non puoi sapere se l'utente ha la finestra di windows aperta a tutto schermo.. perchè se così non fosse, non ha significato prendere la metà dello schermo! Metti il caso uno ha la finestra in basso a sinistra e grande 300x400 ..

Si d'accordo ma quello è il metodo utilizzato (o quello o simili)
per i pop-up ............

style="vertical-align:middle;"

vertical-align funziona solo col le table.

[Igreo]

E allora sei OT!


Nel frattempo quoto quello che + mi interessa!
Ciao.

Originariamente inviato da Igreo
Scusate ma il vertical-align:middle FUNZIONA? ^^''

A me pare proprio di no... se piazzo un table all'interno di due div di cui il primo ha la funzione style="vertical-align:middle;" non succede proprio niente e il table mi si piazza proprio come se fosse top, cioè in alto! mha..


Inoltre vi faccio vedere la mia prova non funzionante:

CSS_

#con-overlay {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width:100%;
    height:1%;
    text-align:center; /*per IE 5.5 o minore*/
    background:transparent;
}
#overlay {
    position:relative;
    top:50px;
    display:block;
    margin:0px auto;
    width:500px;
    height:400px;
    background:#ff0000;
} 

BODY_

<div id="con-overlay">
<div id="overlay">
<P align="right">
[url="javascript:void(0);"][B]X[/B] Chiudi[/url]
</P>
<CENTER>
<H1>DIGREO SITE</H1>
<DIV id="sal_init">
</DIV>
<H3 class="sb" align="center">E-mail:digreo@hotmail.it</H3>
<DIV id="messages">

</DIV>
</CENTER>
</div>
</div> 

JAVASCRIPT ESTERNO_

function apertura() {
    if (document.getElementById('overlay')) document.getElementById('overlay').style.display='block';
    if (document.getElementById('sal_init')) document.getElementById('sal_init').innerHTML='<P class="bnu">BENVENUTI nella nostra Bottega Universale!<\/P>';
    //if (document.getElementById('messages')) document.getElementById('messages').innerHTML= getMessage();
    setTimeout("if (document.getElementById('overlay')) document.getElementById('overlay').style.display='none'",6000);
}
setTimeout("apertura();", 5000); 

Dove sbaglio?