Div overlay: ecco di cosa ci occupiamo in questo articolo.
Cos’è un div overlay? È un modo per aprire una finestra rimanendo nella stessa pagina e oscurando lo sfondo.
Vi posto sotto il codice (javascript, html e css) per oscurare la pagina ossia realizzare un overlay.
Sicuramente avrete visto in giro questo effetto: al click su un pulsante o un link viene aperta una finestra e oscurata la pagina sottostante.
In questo caso non è inserito il fade (la dissolvenza).
Mi scusino gli amici programmatori (non sono una programmatrice e il codice che posto non sarà mai perfetto).
Però questo è un effetto carino su cui si può lavorare, mentre si realizzano le proprie pagine.
Un punto di partenza 🙂
Inserisco tutto all’interno di un unico file html, per comodità.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="it">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Prova Overlay</title>
<style>
.content{
width: 50%;
margin:0 auto;
}
#overlay {
display: none;
z-index: 2;
background: rgba(0,0,0,0.5);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
margin:0 auto;
}
#finestra {
display: none;
position: relative;
z-index: 3;
margin: 0 auto;
width: 40%;
height: auto;
background: #FFFFFF;
color: #000;
padding:5%;
border-radius:20px;
}
input
{
height: 40px;
border-radius: 7px;
background-color: #dddddd;
color: #000000;
margin-top: 5px;
}
</style>
<script>
function toggle(){
var overlay = document.getElementById('overlay');
if(overlay.style.display == "block"){
overlay.style.display = "none";
finestra.style.display = "none";
} else {
overlay.style.display = "block";
finestra.style.display = "block";
}
}
</script>
</head>
<body>
<div class="content">
<h1>Titolo della nostra pagina</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div style="text-align:center"><input type="button" onmousedown="toggle()" value="Clicca qui per aprire la finestra"></div>
<!-- Questo è l'Overlay -->
<div id="overlay"></div>
<div id="finestra">
<a href="" onmousedown="toggle()" style="text-decoration:none; float:right">Chiudi</a>
<h1>Titolo della finestra</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
</body>
</html>Ecco cosa produce questo codice per la creazione di una finestra popup.
Ecco fatto! Sembra un po’ a scatto, lo so. Ma è perché manca la dissolvenza.
Ora sapete come oscurare la pagina e creare un div con effetto overlay.
Nata nel 1974, Alexia si interessa al web nel lontano 1999 grazie ad un corso di formazione regionale. Crea le sue prime pagine html dapprima con programmi wysiwyg (Dreamweaver), poi direttamente con notepad ++. Inizia a creare siti web nel 2001. Pur essendo amante delle interfacce, studia php assecondando la sua grande curiosità. Lavora in campo digitale per molti anni e si butta poi nel favoloso mondo della seo. Artemedialab nasce come laboratorio sperimentale nel 2008 e diventa nel 2020 azienda individuale. Attualmente insegnante di informatica nella scuola primaria, docente nei corsi di formazione professionale per l’assolvimento dell’obbligo scolastico, media educator.