tutorial pengembangan web terbaru
 

W3.CSS modal


W3.CSS Modal

Sebuah modal adalah kotak dialog / popup window yang ditampilkan di atas halaman saat ini:

×

modal header

Halo dunia!

Kembali ke W3.CSS Modal untuk mempelajari lebih lanjut!

Modal Footer Tutup


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">&times;</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).

Catatan &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:

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

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">&times;</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:

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

Contoh

<div class="w3-modal-content w3-card-8">
Cobalah sendiri "

kata modal animasi

Gunakan salah satu w3-bernyawa-zoom | atas | bawah | kanan | kelas kiri untuk meluncur di modal dari arah tertentu:

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

×

modal header

Beberapa teks ..

Beberapa teks ..

modal Footer

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):

Contoh

<div class="w3-modal w3-animate-opacity">
Cobalah sendiri "

modal Gambar

Klik pada gambar untuk menampilkannya dalam ukuran penuh:

Norway
×
Norway

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:

×

Avatar
Ingat saya
Lupa kata sandi?

Contoh

Cobalah sendiri "

modal Tab

Contoh ini menciptakan modal dengan konten tab:

×

Header

London

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paris

Paris adalah ibu kota Prancis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo

Tokyo adalah ibu kota Jepang.


Contoh

Cobalah sendiri "

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 "