professional webmaster

Finestre modali, lightbox, pop-inModal windows, lightbox, pop-in

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.

Various modal windows with different graphics and effects.

Varie finestre modali con grafica ed effetti differenti.

Leggi anche "Testo in modal, finestra di dialogo" nella guida Scrivere in HTML.
NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

8a-Modal window positioned - HTML, CSS

8a-Finestra modale posizionata - HTML, CSS

Apertura automatica con posizione in basso a dx o a sx.

Preview + download

8b-Various modal windows with animations - HTML, CSS

8b-Finestre modali varie con animazioni - HTML, CSS

Preview + download

8c-Custom modal window - HTML, CSS

8c-Finestra modale personalizzata - HTML, CSS

Preview + download

8d-Crossfade modal window - HTML, CSS

8d-Finestra modale crossfade - HTML, CSS

Preview + download

8e-Multiple modal windows with different content - HTML, CSS

8e-Finestre modali multiple con contenuti differenti - HTML, CSS

Preview + download

8f-Modal window with timeout - HTML, CSS, Jquery

8f-Finestra modale con timeout - HTML, CSS, jQuery

Nella dimostrazione, la finestra si apre automaticamente dopo 2 secondi e si chiude dopo 5 secondi. Effetto fade. Possibilità di chiusura anche manuale.

Preview + download


Single image lightbox in three versions

Immagine lightbox singola in tre versioni

Image lightbox - HTML, CSS

Preview and code

8g-Image lightbox - HTML, CSS, Javascript

Preview + download

8h-Image lightbox - HTML, CSS, jQuery

Preview + download

Usefull solutions

Soluzioni utili

Chiusura per popup

Apri codice
<div id="modal">
..........................
</div>
<span style="color:red;float:right;font-size:2.0rem" onclick="document.getElementById('modal').style.display='none'">&times;</span>

Membership index


Argomenti del sito correlati:
Leggi tutto