W3.CSS modale
Un modale è una finestra di dialogo / popup che viene visualizzato sulla parte superiore della pagina corrente:
Come creare un modale
Esempio
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> Prova tu stesso " La classe "w3-modali"
Un modale può essere qualsiasi contenitore HTML (come un <div>) con class = "w3-modali".
La classe "-modal-contenuti w3"
Tutti i contenuti modale deve essere posto in un contenitore HTML con class = "-content w3-modali".
contenuto modale può essere qualsiasi elemento HTML (intestazioni, paragrafi, immagini, ecc)
Aprire un modale
Utilizzare qualsiasi elemento HTML per aprire il modale. Questo è spesso un pulsante o un collegamento.
Aggiungere l'attributo onclick e puntare l'id della modali (ID01 nel nostro esempio), utilizzando il metodo document.getElementById () e specificare un ID univoco che corrisponde al tasto "trigger" (ID01).
La chiusura di un modale
Per chiudere un modale, aggiungere la classe w3-closeBtn ad un elemento con un attributo onclick che punta al id del modali (ID01). È inoltre possibile chiudere facendo clic al di fuori del modali (vedi esempio sotto).
 | &volte; (×) è un'entità HTML che è l'icona preferito per pulsanti di chiusura, piuttosto che la lettera "x". |
|---|
Modale Intestazione e piè di pagina
All'interno delle <div> con class = "-modal-contenuti w3", classi di uso w3-container per creare diverse sezioni del modal:
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-closebtn">×</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> Prova tu stesso " Modale come una carta
Per visualizzare il modale come una carta, aggiungere il w3-carta- * di classe al contenitore w3-modal-contenuti:
Modals animati
Utilizzare uno dei w3-animato-zoom | superiore | basso a destra | | classi a sinistra per scorrere nella 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">
Prova tu stesso " Si può anche svanire nel colore di sfondo del modali (w3-modale):
modale Immagine
Clicca sull'immagine per visualizzarla a schermo intero:
Esempio
<img src="img_fjords.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_fjords.jpg">
</div>
Prova tu stesso " Modale Galleria di immagini
Clicca su un'immagine per visualizzarla in full size:
Esempio
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.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>
Prova tu stesso " Modale Login Form
Questo esempio crea un modal per il login:
Tab modale
Questo esempio crea un modal con i contenuti a schede:
Chiudere il modale
Negli esempi precedenti, si usa un pulsante per chiudere la modale. Tuttavia, con un po 'di JavaScript, è anche possibile chiudere il modal quando si fa clic al di fuori del dialogo modale:
Esempio
// 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";
}
}
Prova tu stesso "