W3.CSS Modal
Ein modal ist ein Dialogfeld / Popup-Fenster, das oben auf der aktuellen Seite angezeigt wird:
SieSo erstellen Sie eine Modal
Beispiel
<!-- 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> Versuch es selber " Die "w3-modal" Klasse
Ein modal kann jeder HTML - Container sein (wie ein <div>) mit class = "w3-modal".
Die "w3-modal-content" Klasse
Alle modalen Inhalt sollte mit class = "w3-modal-content" in einem HTML - Container platziert werden.
Modal Inhalt kann jedes HTML-Element (Überschriften, Absätze, Bilder, etc.)
Öffnen Sie ein Modal
Verwenden Sie einen beliebigen HTML-Element des modalen zu öffnen. Dies ist oft eine Schaltfläche oder einen Link.
Fügen Sie das Onclick - Attribut und verweisen auf die ID des Modal (ID01 in unserem Beispiel), die document.getElementById () Methode verwendet wird und eine eindeutige ID angeben, die die "Trigger" Taste entspricht (ID01).
Schließen eines Modal
Um einen modalen schließen, fügen Sie die w3-closebtn Klasse auf ein Element zusammen mit einem Onclick - Attribut, das an die ID des modalen Punkte (ID01). Sie können auch außerhalb des modalen durch Anklicken schließen (siehe Beispiel unten).
 | &mal; (X) ist ein HTML-Entität, die das bevorzugte Symbol für Schließen-Button, anstatt den Buchstaben "x". |
|---|
Modal Kopf- und Fußzeile
Innerhalb der <div> mit class = "w3-modal-content", Klassen Verwendung w3-Container verschiedene Abschnitte des Modal 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-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> Versuch es selber " Modal als Karte
Um die modal als Karte angezeigt werden , fügen Sie die w3-karten- * Klasse der w3-modal-Inhalt Behälter:
SieAnimierte Modals
Verwenden Sie eine der w3-belebtes-zoom | top | bottom | rechts | links Klassen im Modal aus einer bestimmten Richtung zu schieben:
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">
Versuch es selber " Sie können verblassen auch in der Hintergrundfarbe des modalen (w3-modal):
Modal Bild
Klicken Sie auf das Bild, um es in voller Größe anzuzeigen:
Beispiel
<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>
Versuch es selber " Modal 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_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>
Versuch es selber " Modal Login Form
In diesem Beispiel wird eine modale für die Anmeldung:
Modal Tab
In diesem Beispiel wird eine modale mit Tabbed-Inhalt:
Schließen Sie die Modal
In den obigen Beispielen verwenden wir eine Taste, um den Modal zu schließen. Doch mit ein wenig JavaScript, können Sie auch die modale schließen, wenn sie außerhalb des Modal Box klicken:
Beispiel
// 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";
}
}
Versuch es selber "