Add Close Button To Modal Popup Javascript

4 min read Jun 22, 2024

Cara Menambahkan Tombol Tutup ke Modal Popup dengan JavaScript

Modal popup adalah elemen UI yang umum digunakan untuk menampilkan konten tambahan atau meminta input dari pengguna. Seringkali, modal popup memiliki tombol "Tutup" untuk memungkinkan pengguna menutupnya. Artikel ini akan membahas bagaimana Anda dapat menambahkan tombol tutup ke modal popup dengan JavaScript.

1. Buat HTML Modal Popup

Pertama, kita perlu membuat HTML untuk modal popup kita. Berikut contoh dasar:


  
    ×
    Judul Modal
    Konten modal popup.

id="my-modal": ID yang akan digunakan untuk mengidentifikasi modal.
class="modal": Kelas untuk styling modal.
class="modal-content": Kelas untuk styling konten modal.
<span class="close-button">×</span>: Elemen span yang berfungsi sebagai tombol tutup.
<h2>Judul Modal</h2>: Judul modal.
<p>Konten modal popup.</p>: Konten utama modal.

2. Tambahkan CSS untuk Styling

Sekarang, tambahkan beberapa CSS untuk styling modal popup:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

CSS ini:

Menentukan style dasar untuk modal popup.
Menambahkan style untuk konten modal.
Menambahkan style untuk tombol close dengan simbol "×" di bagian kanan atas modal.

3. Tambahkan JavaScript untuk Fungsionalitas

Akhirnya, kita akan menambahkan JavaScript untuk membuat tombol tutup berfungsi:

// Mendapatkan elemen modal
const modal = document.getElementById('my-modal');

// Mendapatkan elemen tombol close
const closeButton = document.querySelector('.close-button');

// Fungsi untuk menutup modal
closeButton.onclick = function() {
  modal.style.display = 'none';
}

JavaScript ini:

Mendapatkan referensi ke elemen modal dan tombol close.
Menambahkan event listener ke tombol close.
Ketika tombol close diklik, fungsi onclick akan mengubah properti display dari modal menjadi none, sehingga modal disembunyikan.

4. Cara Menampilkan Modal

Untuk menampilkan modal, Anda dapat menambahkan kode JavaScript berikut:

// Mendapatkan elemen modal
const modal = document.getElementById('my-modal');

// Menampilkan modal
modal.style.display = 'block';

Kode ini akan mengubah properti display dari modal menjadi block, sehingga modal akan muncul di layar.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan tombol tutup ke modal popup dengan JavaScript. Anda dapat memodifikasi CSS dan JavaScript untuk menyesuaikan tampilan dan fungsionalitas modal popup sesuai kebutuhan Anda.