W3.CSS Modal
Sebuah modal adalah kotak dialog / popup window yang ditampilkan di atas halaman saat ini:
Cara Membuat A Modal
Contoh
<!-- 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> Cobalah sendiri " The "w3-modal" Kelas
Sebuah modal dapat berupa wadah HTML (seperti <div>) dengan class = "w3-modal".
The "w3-modal-konten" Kelas
Semua konten modal harus ditempatkan dalam wadah HTML dengan class = "w3-modal-konten".
konten modal dapat setiap elemen HTML (judul, paragraf, gambar, dll)
Buka Modal
Gunakan setiap elemen HTML untuk membuka modal tersebut. Hal ini sering tombol atau link.
Menambahkan atribut onclick dan menunjuk ke id dari modal (ID01 dalam contoh kita), menggunakan metode document.getElementById () dan menentukan ID unik yang cocok dengan tombol "pemicu" (ID01).
Menutup Modal
Untuk menutup modal, tambahkan kelas w3-closebtn ke elemen bersama-sama dengan atribut onclick yang menunjuk ke id dari modal (ID01). Anda juga dapat menutupnya dengan mengklik di luar modal (lihat contoh di bawah).
 | &waktu; (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol dekat, bukan huruf "x". |
|---|
Modal header & Footer
Dalam <div> dengan class = "w3-modal-content", kelas penggunaan w3-wadah untuk membuat bagian yang berbeda di modal yang:
Contoh
<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> Cobalah sendiri " Modal Sebagai Kartu
Untuk menampilkan modal sebagai kartu, menambahkan w3-kartu-* kelas untuk wadah w3-modal-konten:
kata modal animasi
Gunakan salah satu w3-bernyawa-zoom | atas | bawah | kanan | kelas kiri untuk meluncur di modal dari arah tertentu:
Contoh
<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">
Cobalah sendiri " Anda juga dapat memudar dalam warna latar belakang modal ini (w3-modal):
modal Gambar
Klik pada gambar untuk menampilkannya dalam ukuran penuh:
Contoh
<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>
Cobalah sendiri " Modal Galeri
Klik pada gambar untuk menampilkannya dalam ukuran penuh:
Contoh
<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>
Cobalah sendiri " Modal Login Form
Contoh ini menciptakan modal untuk login:
modal Tab
Contoh ini menciptakan modal dengan konten tab:
Tutup Modal
Dalam contoh di atas, kita menggunakan tombol untuk menutup modal tersebut. Namun, dengan sedikit JavaScript, Anda juga dapat menutup modal ketika mengklik luar kotak modal:
Contoh
// 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";
}
}
Cobalah sendiri "