W3.CSS Modal
Modalne okno dialogowe jest okno / popup, który jest wyświetlany na górze bieżącej strony:
Jak utworzyć modalne
Przykład
<!-- 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> Spróbuj sam " W "w3-modal" Class
Modalnego może być dowolny pojemnik HTML (jak <div>) z class = "w3-modalnego".
W "w3-modal-content" Class
Wszystko modal zawartość powinna być umieszczona w kontenerze HTML class = "w3-modal-content".
Zawartość modalna może być dowolny element HTML (nagłówki, akapity, obrazy, etc.)
Otwórz modalne
Za pomocą dowolnego elementu HTML, aby otworzyć modalnej. Często jest to przycisk lub link.
Dodaj atrybut onclick i punkt do id modalnym (id01 w naszym przykładzie), przy zastosowaniu metody document.getElementById () i podać unikatowy identyfikator, który odpowiada przycisk "wyzwalania" (id01).
Zamknięcie modalnego
Aby zamknąć modalne, dodać klasę w3-closebtn do elementu wraz z atrybutu onclick, który wskazuje na id modalnym (id01). Można również zamknąć, klikając poza modalnym (patrz przykład poniżej).
 | &czasy; (X) jest podmiotem HTML, który jest preferowanym ikona bliskich przyciskami, zamiast litery "X". |
|---|
Modal Nagłówek i stopka
Wewnątrz <div> class = "w3-modalnego zawartości", klas wykorzystanie w3-kontenerowych, aby tworzyć różne sekcje w modalnym:
Przykład
<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> Spróbuj sam " Modal jak karta
Aby wyświetlić modalnego jako karta, dodać w3-kartonu * klasę do pojemnika w3-modal-content:
animowane czasowniki modalne
Użyj dowolnej z w3-animate-powiększyć | Top | dołu | right | pozostawionych klas przesuwać w modalnego z określonym kierunku:
Przykład
<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">
Spróbuj sam " Można również znikną w kolorze tła modalna jest (W3-modalnej):
Modal Obraz
Kliknij na zdjęcie, aby zobaczyć je w pełnym rozmiarze:
Przykład
<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>
Spróbuj sam " Modal Galeria zdjęć
Kliknij na zdjęcie, aby zobaczyć je w pełnym rozmiarze:
Przykład
<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>
Spróbuj sam " Modal Login Form
Ten przykład tworzy modalne do logowania:
Modal Tab
Ten przykład tworzy modalne z zakładkami treści:
Zamknij modalnej
W powyższych przykładach, używamy przycisku, aby zamknąć modalnej. Jednak przy odrobinie JavaScript, można również zamknąć modalna po kliknięciu poza pole modalnej:
Przykład
// 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";
}
}
Spróbuj sam "