effetto background opaco tipo una finestra modale javascript

**kylnas1** · 15-02-2009, 11:17

Salve a tutti,
come da topic come posso fare per avere un effetto background opaco (scuro), che si ha quando si utilizzano alcuni framework js e si mostrano finestre modali?

Sicuramente serve la proprietà "opacity", ma non mi viene in mente come mettere quella specie di patina scura sopra alla pagina.

Grazie

**Mich_** · 16-02-2009, 11:38

Ecco un esempio (molto grezzo)

codice:

<body>
  <div id="contenuto">
    qui il contenuto del sito
  </div>
  <div id="opacizzato">
    <div>
      

contenuto della finestra modale</p>
    </div>
  </div>
</body>

CSS comune:
body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

CSS standard:
#contenuto {
  position: absolute;
  top:0; left:0;
  ...
}
#opacizzato {
  display: none;
}

CSS in caso di finestra modale:
#contenuto {
  ...
}
#opacizzato {
  display: block;
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: url(semitrasp.png);   /* immagine di sfondo semitrasparente */
}
#opacizzato div {
  position: absolute;
  width: 300px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -150px;       /* la meta` di width;  */
  margin-top: -100px;       /* la meta` di height */
}

**kylnas1** · 16-02-2009, 23:56

grazie, ottimo!

**gervaweb** · 19-04-2009, 11:33

GoodWeb
Semplice soluzione .... interessante
Ma se volessi aprire una pagina come layer, quindi senza dover riportare il contenuto sottostante come posso fare.

O meglio come posso modificare la tua soluzione.
Grazie per l'interesse

**Mich_** · 20-04-2009, 10:10

@gervaweb
Non ho capito cosa stai chiedendo.
In particoalre la frase: "aprire una pagina come layer".

Pero` se la domanda si riferisce ad un problema diverso rispetto ad aprire una finestrella rendendo tutto il resto opaco, ti prego di farlo in una nuova discussione.

**gervaweb** · 20-04-2009, 10:27

No no scusami, forse mi sono espresso male.

Ho provato ad utilizzare il tuo codice e ho ottenuto il risultato,

ma solo riportando sia la pagina origine <div id="contenuto">qui il contenuto del sito</div>

e la pseudo finestra <div id="opacizzato">.

Sinceramente ho navigato in rete per cercare diverse soluzioni tra cui: GreyBox, modalbox ... ma tutte implicano l'utilizzo di classi e molto codice rispetto alla tua estremamente semplice.

Mi chiedevo se la tua soluzione, vista la sua semplicità, poteva essere implementata in una mia pagina dove alla pressione di un link, si apra una pagina "opaca" con del contenuto, senza dover riportare sia la pagina d'origine come quella nuova.
Premetto che non sono una cima in programmazione e forse la soluzione è più semplice di quella che sia, ma se mi vuoi aiutare e illustrare l'eventuale strada te ne sare grato.

Spero di essermi spiegato meglio
Ciao e grazie

**Mich_** · 20-04-2009, 11:26

La "mia" soluzione e` una bozza molto grezza, per cui e` molto semplificata rispetto ad una soluzione reale.

E la mia soluzione prevede che l'offuscamento della pagina sia generato da un evento JS (non avrebbe senso altrimenti). Pero` la finestra opaca e la finestrella con il messaggio devono essere presenti prima dell'evento che li fa visualizzare (indicativamente essere caricati assieme al resto della pagina - con eccezioni in caso di uso di AJAX o sim). Quello che eventualmente si puo` modificare e` il testo contenuto nella finestrella, ma questo esula dagli scopi di questo thread.

Il codice JS potrebbe essere (esempio che utilizza l'evento click su un link):

codice:

<noscript>Questo bottone funziona solo se JS e` attivo.&amp;nbsp;</noscript>
clicca qui

Occore poi una piccola modifica del codice HTML e del CSS rispetto a prima:

codice:

HTML:
<body>
  <div id="contenuto">
    qui il contenuto del sito
  </div>
  <div id="opacizzato" class="nascosto">
    <div>
      

contenuto della finestra modale</p>
      

chiudi la finestra opaca</p>
    </div>
  </div>
</body>

CSS:
#opacizzato.nascosto {
  display: none;
}

#opacizzato.lovedo {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: url(semitrasp.png);   /* immagine di sfondo semitrasparente */
}

**gervaweb** · 20-04-2009, 19:24

Grazie per la celere risposta....
ma data la mia poca dimestichezza con Javascript non ho afferrato bene quello che dici.

Dando per scontato la soluzione anche "grezza" ma sinceramente estremamente semplice e interessante, non ho capito se sia possibile avere una cosa del genere e come:

- una pagina con del contenuto e quant'altro
- nella stessa pagina, un link che apra un nuovo contenuto sfruttando la tua semplice soluzione, offuscando il contenuto sottostante e caricando con eventualmente un include php il resto.

Grazie e scusa se sono così "testone"

ma proprio non ci sono arrivato alla soluzione

**ricman** · 21-04-2009, 09:35

Originariamente inviato da gervaweb
- una pagina con del contenuto e quant'altro
- nella stessa pagina, un link che apra un nuovo contenuto sfruttando la tua semplice soluzione, offuscando il contenuto sottostante e caricando con eventualmente un include php il resto.

Grazie e scusa se sono così "testone"

ma proprio non ci sono arrivato alla soluzione

Guarda... prendi il codice che ti ha passato... lo copi, lo incolli on un file vuoto.
Poi leggi una paio di guide e DOPO lo manipoli...

E' più facile a farsi che a spiegarsi... basta provare...

**Mich_** · 21-04-2009, 10:04

Originariamente inviato da gervaweb
Grazie per la celere risposta....
ma data la mia poca dimestichezza con Javascript non ho afferrato bene quello che dici.

Dando per scontato la soluzione anche "grezza" ma sinceramente estremamente semplice e interessante, non ho capito se sia possibile avere una cosa del genere e come:

- una pagina con del contenuto e quant'altro
- nella stessa pagina, un link che apra un nuovo contenuto sfruttando la tua semplice soluzione, offuscando il contenuto sottostante e caricando con eventualmente un include php il resto.

Grazie e scusa se sono così "testone"

ma proprio non ci sono arrivato alla soluzione

Nel file HTML deve esserci:
- il contenuto vero della pagina (racchiuso in un <div>);
- un altro <div> contenente il layer (livello) con sfondo semitrasp. e il messaggio
I due oggetti sono posizionati in modo assoluto, nella stessa posizione, per cui risultano sovrapposti.
Questo esiste gia` fin dall'inizio. Solo che il livello superiore (quello con sfondo semitrasp) non viene visualizzato, avendo l'attributo CSS display:none;

Quello che fa il JS e` semlicemente rendere visibile il layer superiore (e con l'altro bottone renderlo invisibile).

Nota che in questo il PHP non c'entra. I due livelli ci sono comunque nella pagina; devono venir precaricati all'inizio.
Se vuoi una cosa dinamica a livello server, ilprocesso e` molto piu` complesso, e necessita di strumenti tipo PHP o AJAX, che pero` esulano dagli scopi di questo forum (per quelli devi rivolgerti in PHP o JS rispettivamente).

Discussione: effetto background opaco tipo una finestra modale javascript

Strumenti discussione

Ricerca discussione

Visualizza

effetto background opaco tipo una finestra modale javascript

Permessi di invio