Toggle sidebar
  • Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Aprire un box all' interno della pagina stile "Popup"

Kaito

Kaito

Utente Strepitoso
Autore del topic
16 Febbraio 2011
4.511
47
Miglior risposta
0
Dati i numerosi thread aperti riguardo alla questione, mi sembrava opportuno aprire un topic per spiegare come fare ciò.

Per prima cosa bisognerà impostare i CSS, creando un div di sfondo (in questo caso useremo un nero chiaro, ma un' immagine nera in opacità è più consigliata) e un div che sarà il vero e proprio box dei contenuti.

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

#overall quindi sarà il nostro background che successivamente nei codici javaScript andremo ad inserire sovrastante al body mentre #innerel è il nostro box. Ovviamente possiamo personalizzarlo come meglio crediamo, inserendo bordi arrotondati etc. etc.
E' importante ricordare di mettere margin: 0; al body, cosicché l' overall vada esattamente ad inizio pagina e non ci siano strani e spiacevoli margini.

Ora passiamo ai codici JavaScript. Per facilitare il lavoro, utilizzeremo la rinomata ed efficace libreria jQuery, quindi andremo ad includerla nell' <head> del documento tramite i seguenti codici (nell' HTML5 non è necessario specificare il type).

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Tornando ai codici veri e propri, creeremo una funzione per far apparire il box, mettendolo prima del body tramite la funzione
Perfavore, Entra oppure Registrati per vedere i Link!
e calcolandone la distanza dal margine superiore con un semplice calcolo matematico.

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Ovviamente però, necessiteremo anche di una funzione di chiusura. Nulla di più semplice! Sfrutteremo la funzione
Perfavore, Entra oppure Registrati per vedere i Link!
per creare un effetto fade ('sfumato').

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Potremo sfruttare questa funzione in molti modi, ad esempio creando un' immagine di chiusura nel box oppure un semplice link. Ora non ci resta che unire tutte le parti, ottenendo una cosa simile a questa, di cui
Perfavore, Entra oppure Registrati per vedere i Link!
(codici in HTML5):

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

Quasi quasi ti lascio una piccola critica.. :mmm:
Secondo me questa riga non è il massimo:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
ma sarebbe meglio mettere i due DIV separati:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!

Dico questo poichè ( anche se alla fine il posizionamento degli elementi è più macchinoso ) fornirebbe la possibilità di chiudere la "finestra" cliccando all'esterno di essa ( cosa che l'utente medio di internet tenterà di fare per qualche ora prima di andarsi a cercar il tasto "chiudi" ).. ;)
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

Già ma così bisogna far sparire due elementi, invece nell' altro modo basta fare il fadeOut di overall
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

Pinguto ha detto:
Non è vero: puoi applicare un CLASS in comune oppure facendo::emoji_smiley:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Clicca per espandere...

Mmm, trovo sempre più comodo come scritto da me :emoji_confused:

La funzione di "cliccare all' esterno di essa" sarebbe disponibile anche normalmente, semplicemente applicando un .not()


PS: Ora che ci penso - premetto che non ho provato - probabilmente non si posizionerebbe bene #innerel, dato che verrebbe considerato un elemento blocco dopo overall.
 
Ultima modifica:
Riferimento: Aprire un box all' interno della pagina stile "Popup"

@Kaito la funzione .not() non vi ha effetto (ho provato a suo tempo) poichè l'evento click si propaga anche agli elementi che lo contengono.. qwe

Poi perchè l'elemento #innerel non si posizionerebbe bene? sono semplici calcoli matematici.. :emoji_smiley:

NB: non voglio far in nessun modo polemica, ma mi sembra un modo costruttivo di discutere.. ;)
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

Pinguto ha detto:
@Kaito la funzione .not() non vi ha effetto (ho provato a suo tempo) poichè l'evento click si propaga anche agli elementi che lo contengono.. qwe

Poi perchè l'elemento #innerel non si posizionerebbe bene? sono semplici calcoli matematici.. :emoji_smiley:

NB: non voglio far in nessun modo polemica, ma mi sembra un modo costruttivo di discutere.. ;)
Clicca per espandere...

Tecnicamente qualcosa del tipo $("*.not(#innerel)") dovrebbe funzionare..

Comunque non si posizionerebbe bene in quanto è un elemento blocco #innerel e andrebbe di seguito a #overall, o almeno penso.
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

@Kaito non è così: se imposti nel css la proprietà position su absolute o fixed lo "zero" viene preso dal medesimo punto, quindi con le medesime coordinate gli elementi risulteranno sovrapposti.. :emoji_smiley:

L'unico caso in cui lo "zero" non è in comune è il position:relative che prende in considerazione il posto su cui è fisicamente posizionato l'elemento.. :emoji_smiley:

PS:- quale era il tuo contatto skype? XD
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

Pinguto ha detto:
@Kaito non è così: se imposti nel css la proprietà position su absolute o fixed lo "zero" viene preso dal medesimo punto, quindi con le medesime coordinate gli elementi risulteranno sovrapposti.. :emoji_smiley:

L'unico caso in cui lo "zero" non è in comune è il position:relative che prende in considerazione il posto su cui è fisicamente posizionato l'elemento.. :emoji_smiley:

PS:- quale era il tuo contatto skype? XD
Clicca per espandere...

Grazie, ma sapevo la differenza tra i position patpat Non usando spesso l' absolute, l' unico mio dubbio era appunto la sovrapposizione.

Comunque mr.auxyl :emoji_slight_smile: DIrei di finire qua la 'chiaccherata' però.
 
Riferimento: Aprire un box all' interno della pagina stile "Popup"

si, vabbè, era un modo come un'altro per dire che gli elementi si sarebbero sovrapposti.. :emoji_smiley:

PS: Ti ho aggiunto.. :emoji_slight_smile:
 
Devi accedere o registrarti per rispondere qui.
 
 
Top
Indietro