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

Pop-up? No, meglio un pop-in (finestra modale)

Tutti conoscono i pop-up, quelle finestre fastidiose, di solito pubblicitarie, che si aprono sovrapponendosi alle pagine web visitate.
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 la prima a raccomandare di non disturbare gli utenti utilizzando mezzi invasivi al solo fine di far arrivare messaggi pubblicitari, vediamo invece come creare finestre per cose importanti e utili, facendo in modo che non possano essere disattivate tramite le funzioni del browser.
La soluzione è utilizzare i "pop-in" (finestre modali) al posto dei pop-up.

Per prima cosa, avendo notato una certa confusione di idee in messaggi inviati da utenti, chiarisco che la differenza tra pop-up e pop-in non riguarda il contenuto (testo, immagini ecc), ma solo le funzionalità

Quale è, dunque, la differenza tra pop-up e pop-in?

• Il pop-up viene aperto dal sistema operativo del tuo dispositivo, che si tratti di un telefono, tablet o computer
• Il pop-up non può essere personalizzato, puoi semplicemente scegliere le opzioni, per esempio: Conferma o Annulla
• I pop-up sono spesso percepiti come invadenti e per questo sui principali browser è stata creata una funzione di blocco
• Dal 2017 Google penalizza i siti Web che utilizzano i pop-up

• Il pop-in (finestra modale) viene codificato direttamente nella pagina web visualizzata dall'utente
• Il pop-in, a differenza del pop-up, consente di interagire con il contenuto
• Il pop-in viene percepito come un elemento della pagina, non come un elemento esterno, e non può essere bloccato da una funzione di blocco del browser.
• Il pop-in può essere personalizzato graficamente

Il vantaggio di usare un pop-in (finestra modale) è decisamente 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.
NOTA: per richiamare un file esterno, basterà utilizzare un iframe come contenuto (es: <iframe style="width:100%" src="pagina.html" title=""></iframe>).

Vi propongo due versioni di finestre modali (pop-in): 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.

Altre finestre modali e lightbox

Visita la pagina Finestre modali e lightbox
Troverai: