Pop-up? No, meglio un pop-in..

Come creare le finestre modali usando i "pop-in"

Sommario:

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Tutti conoscono i popup, quelle finestre modali che si aprono sovrapponendosi alle pagine web visitate e spesso fastidiose. Tanto fastidiose che spesso vengono disattivate tramite le impostazioni del browser, rendendo vano l'intento del webmaster di far arrivare un messaggio, magari, importante. Fermo restando che sono io la prima a raccomandare di non infastidire gli utenti utilizzando mezzi così invasivi al solo fine di far arrivare messaggi pubblicitari, vediamo invece come utilizzare le finestre modali per cose importanti e utili, facendo in modo che non possano essere disattivate. La soluzione è utilizzare i "popin" invece dei popup.

Quale è la differenza tra popup e popin?

Entrambi sono finestre modali che si aprono in sovrapposizione alla pagina quando l'utente accede, oppure quando clicca su un pulsante di attivazione, ma....
  • Il popup non può essere personalizzato graficamente e può essere bloccato tramite le impostazioni del browser.
  • Il popin può essere personalizzato graficamente e non può essere bloccato tramite le impostazioni del browser.

Direi che il vantaggio di usare un popin è evidente.
In più, il codice che vi presento non utilizza script. La finestra modale si aprirà, quindi, anche nel caso in cui l'utente avesse disattivato javascript sul suo browser.

Vi propongo, dunque, due versioni di finestre modali con popin: una che si apre al click e una che si apre in automatico all'apertura della pagina.

Finestra modale che si apre al click:

Anteprima Download

Naturalmente, la parte dello "style" andrà messa nella zona head della pagina, o in un file css esterno, mentre la parte html andrà posta nella zona body.
Lavorando sulle impostazioni di stile, potrete personalizzare la grafica della finestra modale secondo le vostre esigenze. Nel popin che si apre al click, la stringa che contiene l'input di apertura, cioè questa:

<label class="show_popin" for="popin_check_1">apri popin</label>

....può essere posizionata in qualunque punto del contenuto della pagina dove desiderate che il testo da cliccare appaia.
Al posto del testo "apri popin", potete mettere un'immagine, modificando la stringa in questo modo:

<label class="show_popin" for="popin_check_1"><img src="URLimmagine" alt=""></label>

..e mettendo il percorso della vostra immagine al posto di "URLimmagine".

Finestra modale che si apre al caricamento della pagina:

Anteprima Download

Per l'implementazione e la personalizzazione vale quanto detto sopra.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti