W3.CSS Modal
Ein Modal ist ein Dialogfeld/Popup-Fenster, das über der aktuellen Seite angezeigt wird:
W3.CSS Modale Klassen
W3.CSS bietet die folgenden Klassen für modale Fenster:
| Klasse | Definiert |
|---|---|
| w3-modal | Der Modalcontainer |
| w3-modaler Inhalt | Der modale Inhalt |
Erstellen Sie ein Modal
Die Klasse w3-modal definiert einen Container für ein Modal.
Die Klasse w3-modal-content definiert den modalen Inhalt.
Modaler Inhalt kann ein beliebiges HTML-Element sein (divs, Überschriften, Absätze, Bilder usw.).
Beispiel
<!-- 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>
Öffnen Sie ein Modal
Verwenden Sie ein beliebiges HTML-Element, um das Modal zu öffnen. Häufig handelt es sich jedoch um eine Schaltfläche oder einen Link.
Fügen Sie das Attribut onclick hinzu und zeigen Sie mithilfe der Methode document.getElementById() auf die ID des Modals (in unserem Beispiel id01).
Schließen Sie ein Modal
Um ein Modal zu schließen, fügen Sie einem Element die Klasse w3-button zusammen mit einem onclick-Attribut hinzu, das auf die ID des Modals ( id01 ) zeigt. Sie können es auch schließen, indem Sie außerhalb des Modals klicken (siehe Beispiel unten).
Tipp: × ist die bevorzugte HTML-Entität für Schließen-Symbole und nicht der Buchstabe "x".
Modale Kopf- und Fußzeile
Verwenden Sie w3-Container- Klassen, um verschiedene Abschnitte innerhalb des modalen Inhalts zu erstellen:
Beispiel
<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>
Modal als Karte
Um das Modal als Karte anzuzeigen, fügen Sie eine der Klassen w3-card-* zum Container w3-modal-content hinzu :
Beispiel
<div class="w3-modal-content w3-card-4">
Animierte Modale
Verwenden Sie eine der w3-animate-zoom|top|bottom|right|left- Klassen, um in das Modal aus einer bestimmten Richtung zu gleiten:
Beispiel
<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">
Sie können die Hintergrundfarbe des Modals auch einblenden, indem Sie die w3-animate-opacity- Klasse für das w3-modal-Element festlegen:
Beispiel
<div class="w3-modal w3-animate-opacity">
Modales Bild
Klicken Sie auf das Bild, um es als Modal in voller Größe anzuzeigen:
Beispiel
<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 Bildergalerie
Klicken Sie auf ein Bild, um es in voller Größe anzuzeigen:
Beispiel
<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>
Modales Anmeldeformular
Dieses Beispiel erstellt ein Modal für die Anmeldung:
Beispiel
Modal mit Registerkarteninhalt
Dieses Beispiel erstellt ein Modal mit Inhalt in Registerkarten:
Beispiel
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.