W3.CSS Modale
Un modale è una finestra di dialogo/finestra popup che viene visualizzata nella parte superiore della pagina corrente:
Classi modali W3.CSS
W3.CSS fornisce le seguenti classi per le finestre modali:
| Classe | Definisce |
|---|---|
| w3-modale | Il contenitore modale |
| w3-contenuto-modale | Il contenuto modale |
Crea un modale
La classe w3-modal definisce un contenitore per un modale.
La classe w3-modal-content definisce il contenuto modale.
Il contenuto modale può essere qualsiasi elemento HTML (div, intestazioni, paragrafi, immagini, ecc.).
Esempio
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
Apri un modale
Usa qualsiasi elemento HTML per aprire il modale. Tuttavia, questo è spesso un pulsante o un collegamento.
Aggiungi l' attributo onclick e punta all'id del modale ( id01 nel nostro esempio), usando il metodo document.getElementById().
Chiudere un modale
Per chiudere un modale, aggiungi la classe w3-button a un elemento insieme a un attributo onclick che punta all'id del modale ( id01 ). Puoi anche chiuderlo facendo clic al di fuori del modale (vedi esempio sotto).
Suggerimento: × è l'entità HTML preferita per le icone chiuse, piuttosto che la lettera "x".
Intestazione modale e piè di pagina
Usa le classi w3-container per creare sezioni diverse all'interno del contenuto modale:
Esempio
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
Modale come una carta
Per visualizzare il modale come una scheda, aggiungi una delle classi w3-card-* al contenitore w3-modal-content :
Esempio
<div class="w3-modal-content w3-card-4">
Modali animati
Usa una delle classi w3-animate-zoom|top|bottom|right|left per scorrere nel modale da una direzione specifica:
Esempio
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Puoi anche sfumare il colore di sfondo del modale impostando la classe w3-animate-opacity sull'elemento w3-modal:
Esempio
<div class="w3-modal w3-animate-opacity">
Immagine modale
Clicca sull'immagine per visualizzarla come modale, a grandezza naturale:
Esempio
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
Galleria di immagini modali
Clicca su un'immagine per visualizzarla a grandezza naturale:
Esempio
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Modulo di accesso modale
Questo esempio crea un modale per l'accesso:
Esempio
Modale con contenuto a schede
Questo esempio crea un modale con contenuto a schede:
Esempio
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.