Bootstrap 5 Show Alert Javascript

MUAZHAN

4 min read

·

Jun 24, 2024

33

Share

Bootstrap 5: Menampilkan Alert dengan JavaScript

Bootstrap 5 menyediakan komponen alert yang mudah digunakan untuk menampilkan pesan kepada pengguna. Anda dapat mengontrol penampilan dan fungsi alert dengan menggunakan JavaScript.

Persiapan

1. Include Bootstrap 5: Pastikan Anda telah menyertakan CSS dan JavaScript Bootstrap 5 di dalam halaman HTML Anda.
2. Buat Struktur Alert: Buatlah tag <div> dengan kelas alert dan kelas tambahan untuk menentukan tipe alert seperti alert-success, alert-danger, alert-warning, alert-info, atau alert-light.

Berikut contoh struktur dasar alert:

  Selamat! Anda berhasil melakukan sesuatu!

Menampilkan Alert dengan JavaScript

Anda dapat menggunakan JavaScript untuk menampilkan alert secara dinamis. Berikut adalah langkah-langkahnya:

1. Tambahkan Button: Tambahkan tombol untuk memicu munculnya alert.
2. Tambahkan Event Listener: Gunakan addEventListener untuk menambahkan event listener ke tombol.
3. Tambahkan Kode JavaScript: Tulis kode JavaScript untuk:
   • Mencari Elemen Alert: Gunakan document.querySelector atau document.getElementById untuk menemukan elemen alert.
   • Menampilkan Alert: Gunakan classList.add untuk menambahkan kelas show ke elemen alert.

Berikut contoh kode lengkapnya:

  
  
  
  



  Tampilkan Alert

  

    Selamat! Anda berhasil melakukan sesuatu!
  

  
  

Menutup Alert

Untuk menutup alert secara otomatis, Anda dapat menggunakan kelas alert-dismissible. Tambahkan kelas close ke tombol <button> di dalam alert untuk memberikan fungsi menutup.

  
  Selamat! Anda berhasil melakukan sesuatu!

Tips

• Anda dapat menggunakan setTimeout untuk menampilkan alert secara sementara.
• Anda dapat menambahkan kelas fade untuk efek transisi halus saat menampilkan dan menyembunyikan alert.
• Anda dapat mengganti teks dalam alert dengan JavaScript sesuai dengan kebutuhan.

Kesimpulan

Menampilkan alert dengan JavaScript dalam Bootstrap 5 sangat mudah. Anda dapat menggunakan komponen alert dan JavaScript untuk membuat pengalaman pengguna yang lebih informatif dan menarik.