Cara Membuat Alert Bootstrap 4 Auto Close

Cara Membuat Alert Bootstrap 4 Auto Close - Bootstrap telah menyediakan banyak compnent untuk bisa kita gunakan dalam kebutuhan membuat halaman website. Dengan begitu kita bisa lebih cepat dalam membuat layout ataupun membuat elemen lainnya, misal : membuat navbar, card, notifikasi, alert dan lain sebagainya.

Pada kesempatan kali ini saya akan bagikan kepada kalian tutorial sederhana kombinasi Bootstrap dan jQuery yaitu bagaimana Cara Membuat Alert Bootstrap 4 Auto Close. Mau tau bagaimana cara membuatnya, simak langkah - langkahnya berikut ini.

Untuk membuat Alert tentunya kita akan gunakan component dari Bootstrap 4, silahkan teman - teman bisa membuatnya seperti berikut.

<body>
  <div class="container">
      <div class="row justify-content-center mt-5">
          <div class="col-md-5">
              <div class="alert alert-success" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <strong>Success!</strong> You have been signed in successfully!
            </div>
          </div>
      </div>
  </div>
</body>

Setelah membuat alert seperti diatas, selanjutnya agar alert bisa menghilang atau Auto Close kita akan tambahkan sintak dari jQuery seperti berikut.

<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function(){
                $(this).remove();
            });
        }, 4000);
    });    
</script>

Pada sintak jQuery telah diset dengan fungsi setTimeout sebagai waktu dan remove proses untuk menghilangkan alertnya.

Silahkan kalian buka pada browser untuk melihat hasilnya. Baiklah cukup sekian tutorial bagaimana Cara Membuat Alert Bootstrap 4 Auto Close, semoga bermanfaat, selamat mencoba..

21 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat