Oscurare contenuto che si trova sul retro di un pop up

[Luca_pluatrco]

Ciao,

devo realizzare un <div> che contenga una finestra pop up "modale", cioè quando aperto sia l'unica cosa selezionabile all'interno della pagina.

Dal punto di vista del layout, il pop up deve quindi essere:
1) in prima posizione (ottenibile tramite z-index)
2) in centro pagina a prescindere dalla risoluzione (ottenibile solo con javascript? )
3) tutto lo sfondo deve essere "oscurato".

Il punto tre come puo' essere ottenuto? Devo per forza inserire un qualche div che abbia come sfondo un'immagine semitrasparente grigia? Se sì, quale sarebbe la soluzione meno intrusiva, dato che questo layout lo devo applicare ad un portale CMS già piuttosto ricco di elementi e regole CSS.

Grazie

[Mich_]

In pratica stai chiedendo una cosa del tipo:

<div id="copri">
  <div="popup">
    ...
  </div>
</div>

con CSS:
#copri {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url(semitrasp.png) transparent repeat;
  z-index: 20;     /* o un numero maggiore degli altri z-index, se presenti */
}
#popup {
  position: absolute;
  top: 50%; left: 50%;
  width: XX; height: YY;
  margin-left: -XXX; margin-top: -YYY;   /*meno la meta` di XX e YY */
}

XX, YY, -XXX e -YYY devono avere l'unita` di misura (probabilmente px oppure em)
Il png di sfondo deve essere un'immagine semitrasparente.

Come vedi non c'e` JS in questo.
Chiaramente pero` avrai bisogno di JS per attivare/disattivare questo oggetto.

[paxal78]

per "l'oscuramento" puoi utilizzare un DIV in {position:absolute:z-index:10 } che occupi tutto lo schermo (magari con opacità al 50%) e un DIVche fa da popup sopra {position:absolute:z-index:20 }....in questo modo tutto quello che sta sotto il primo DIV non è cliccabile.

Attenzione alle select in IE6...rimangono sempre al primo livello.

[Luca_pluatrco]

Grazie mille per i suggerimenti circa l'oscuramento!

Per quel che riguarda la parte di JavaScript scrivero' nel forum apposito.

[Luca_pluatrco]

Ciao,

in base a nuove specifiche il popup deve essere "fluido", ovvero adattarsi in dimensione in base al contenuto (specificato via codice).

In questo modo tuttavia come posso ugualmente posizionare a centro pagina il <div> che contiene il contenuto se non posso specificare "a priori" le dimensioni, dato che dovrebbero essere diverse a seconda dei casi?

Grazie ancora

[Mich_]

Per centrare in orizzontale puoi usare il
margin: auto; /* oppure margin: 0 auto; */

Per centrare un oggetto di tipo blocco in verticale invece non conosco altri metodi che posizionarlo e usare margini e top come nell'esempio.

Pero`
se chi/cosa genera il testo sa quanto testo inserisce, si puo` fare una cosa approssimata (ma sufficiente per contenerlo tutto), ad esempio:

$nchar = numero caratteri;
$nrig = floor ( sqrt ($nchar / 5 ) );
$ncol = floor ($nchar / $nrig);

NEL CSS:
  width: $ncol em;
  height: $nrig em;
  left: - $ncol/2 em;
  top: - $nrig/2 em;

la sintassi e` molto approssimata, dato che non so con che sistema lo farai, ma dovrebbe essere comprensibile per un programmatore
Nella sintassi del CSS non devono rimanere spazi tra i meno e i numeri e tra i numeri ed em (cosa che non sapevo come rendere in questo contesto).

[Luca_pluatrco]

se chi/cosa genera il testo sa quanto testo inserisce, si puo` fare una cosa approssimata (ma sufficiente per contenerlo tutto)

Il <div> più esterno racchiude un Iframe. L'obiettivo è di utilizzarlo come un modal popup. Tuttavia deve essere utilizzato come template nel contesto di un portale CMS, quindi deve adattarsi a qualsiasi ambito in cui sia richiesto un popup, senza doversi preoccupare di conoscere il contenuto.
Le dimensioni (width e heigth) del contenuto tuttavia vengono impostate al momento in cui il popup viene creato.

Potrei quindi fare in modo di impostare le dimensioni del div contenitore (passate al momento della chiamata) di conseguenza. Tuttavia come?

Il codice che viene usato per l'Iframe è ASP.NET e C#.

Grazie Mich_

[Mich_]

Non conosco quei programmi Microsoft, ma puoi chiedere nei forum ad essi dedicato (lato server).

Se devi settare lo stile all'interno di un oggetto, puoi usare i CSS in linea.
La cosa e` sintatticamente valida; dal punto di vista della separazione contenuto - formattazione lo e` un po' meno, ma nel tuo caso e` sicuramente giustificato.
<div style="width: ...em; height: ...em; ...">

qui il testo</p></div>

Per quanto riguarda gli <iframe>, sono da evitare in quanto deprecati e non fanno piu` parte delle DTD Strict e successive.

[Luca_pluatrco]

Grazie mille!

Passerò tutto da linea anzichè provvedere ad eseguire passaggi di parametri.

Per quel che riguarda gli Iframe, sono un esplicito desiderio del boss quindi non posso ribattere più di tanto

Cosa si potrebbe altrimenti usare al posto degli Iframe per ottenere le stesse funzioni?

Grazie ancora!!!!

[Mich_]

Originariamente inviato da Luca_pluatrco
Cosa si potrebbe altrimenti usare al posto degli Iframe per ottenere le stesse funzioni?

Forse dovresti aggiornare la tua preparazione ...
Vedi i manuali di XHTML (eventualmente quello di HTML.it).

Frame ed iframe sono da abolire, sostituiti da <div> e programmazione lato server.
Al limite tecniche tipo Ajax (e simili) possono aiutare a fare lo stesso lavoro, ma hanno necessita` di supporto JS (vedi nel forum di JS, dove tali tecniche vengono affrontate per il lato client).