W3.CSS Modaal
'n Modaal is 'n dialoogkassie/opspringvenster wat bo-op die huidige bladsy vertoon word:
W3.CSS Modale Klasse
W3.CSS verskaf die volgende klasse vir modale vensters:
| Klas | Definieer |
|---|---|
| w3-modaal | Die modale houer |
| w3-modale-inhoud | Die modale inhoud |
Skep 'n modaal
Die w3-modale klas definieer 'n houer vir 'n modaal.
Die w3-modale-inhoud klas definieer die modale inhoud.
Modale inhoud kan enige HTML-element wees (divs, opskrifte, paragrawe, beelde, ens.).
Voorbeeld
<!-- 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>
Maak 'n Modal oop
Gebruik enige HTML-element om die modaal oop te maak. Dit is egter dikwels 'n knoppie of 'n skakel.
Voeg die onclick -kenmerk by en wys na die id van die modale ( id01 in ons voorbeeld), met behulp van die document.getElementById() metode.
Maak 'n Modal toe
Om 'n modaal te sluit, voeg die w3-knoppie- klas by 'n element saam met 'n onclick-kenmerk wat na die id van die modaal ( id01 ) wys. Jy kan dit ook toemaak deur buite die modaal te klik (sien voorbeeld hieronder).
Wenk: &tye; is die voorkeur-HTML-entiteit vir naby-ikone, eerder as die letter "x".
Modale kop- en voetskrif
Gebruik w3-houerklasse om verskillende afdelings binne die modale inhoud te skep:
Voorbeeld
<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>
Modaal as 'n kaart
Om die modal as 'n kaart te vertoon, voeg een van die w3-card-*- klasse by die w3-modal-inhoudhouer :
Voorbeeld
<div class="w3-modal-content w3-card-4">
Geanimeerde modale
Gebruik enige van die w3-animate-zoom|bo|onder|regs|links- klasse om in die modaal te gly vanuit 'n spesifieke rigting:
Voorbeeld
<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">
Jy kan ook die modaal se agtergrondkleur vervaag deur die w3-animate-opacity- klas op die w3-modale element in te stel:
Voorbeeld
<div class="w3-modal w3-animate-opacity">
Modale beeld
Klik op die prent om dit as 'n modaal, in volle grootte te vertoon:
Voorbeeld
<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>
Modale Beeldgalery
Klik op 'n prent om dit in volle grootte te vertoon:
Voorbeeld
<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>
Modale aanmeldvorm
Hierdie voorbeeld skep 'n modaal vir aanmelding:
Voorbeeld
Modaal met oortjies inhoud
Hierdie voorbeeld skep 'n modaal met oortjies inhoud:
Voorbeeld
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.