Le finestre pop-up per un'ampia varietà di scopi hanno molti usi nella costruzione del web. Possono essere utilizzati per creare vari tipi di menu, posizionare testi e grafici pubblicitari, suggerimenti durante la compilazione di moduli complessi ed è conveniente posizionare i moduli stessi in finestre che non occupano spazio sulla pagina. Nel nostro articolo troverai una descrizione di come puoi creare una finestra del genere.
È necessario
Conoscenza di base dell'HTML
Istruzioni
Passo 1
popup, html, livello nascosto
Passo 2
In molte pagine del web, puoi vedere che fantasiose librerie di vari framework JavaScript (jQuery, MooTools, Prototype, ecc.) sono utilizzate per creare finestre pop-up nelle pagine. Tuttavia, in realtà, non sono necessari per risolvere questo particolare problema. Gli strumenti disponibili in Hypertext Markup Language (HTML) e Cascading Style Sheets (CSS) sono sufficienti per creare popup. Le finestre create in questo modo funzioneranno indipendentemente dal fatto che JavaScript sia abilitato nel browser del visitatore.
Tutto il codice che crea il popup può essere posizionato su due righe. La prima riga crea un collegamento che deve essere cliccato per visualizzare il popup:
Clicca qui!
Qui, l'attributo onmouseover del tag link imposta il tipo di cursore del mouse predefinito per i link. L'attributo onclick specifica che quando si fa clic sul collegamento, il blocco PopUp nascosto dovrebbe diventare visibile.
La seconda riga è, infatti, la finestra pop-up. Livello con l'identificatore PopUp e la dimensione della finestra, colore e dimensione del testo, sfondo e bordo specificati nell'attributo style:
Questo è il testo nel popup
Non è visibile per impostazione predefinita: è indicato dal selettore di visualizzazione con un valore nessuno nella descrizione dello stile di livello.
In realtà, questo è tutto ciò di cui hai bisogno per creare una finestra pop-up: posiziona queste due righe tra i tag e la tua pagina ed è pronto per l'uso.
Passaggio 3
Per poter chiudere la finestra popup davanti al tag, è necessario aggiungere un collegamento che esegua l'azione opposta, nascondendo il livello visibile con l'identificatore PopUp:
vicino
Passaggio 4
E se vuoi che la finestra si visualizzi non facendo clic, ma passando il cursore del mouse, la prima riga con il collegamento deve essere modificata in questo modo:
muovi il mouse qui!
Passaggio 5
Ora conosci il principio e la struttura del codice della finestra pop-up e il design del suo aspetto e del suo contenuto dipende interamente dai tuoi obiettivi e dalla tua immaginazione.
