Peringatan Bootstrap Tutup Otomatis

153

Kebutuhan saya adalah untuk memanggil peringatan ketika saya mengklik tombol Tambahkan ke Wishlist dan harus menghilangkan peringatan dalam 2 detik. Ini adalah cara saya mencoba, tetapi peringatan menghilang segera setelah muncul. Tidak yakin, di mana bug itu berada ... Adakah yang bisa membantu saya?

Script JS

$(document).ready (function(){
   $("#success-alert").hide();
   $("#myWish").click(function showAlert() {
      $("#success-alert").alert();
      window.setTimeout(function () { 
         $("#success-alert").alert('close'); 
      }, 2000);             
   });      
});

Kode HTML:

<div class="product-options">
   <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a>
   <a href="#" class="btn btn-mini"> Purchase </a>
</div>

Kotak Peringatan:

<div class="alert alert-success" id="success-alert">
   <button type="button" class="close" data-dismiss="alert">x</button>
   <strong>Success!</strong>
   Product have added to your wishlist.
</div>
srikanth_naalla
sumber
Saya mencoba aliran ini .. tetapi tidak yakin bagaimana cara mengimplementasikannya. : /
srikanth_naalla

Jawaban:

276

Untuk slideup yang lancar:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
  <a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

AyB
sumber
3
Ini tidak berfungsi kedua kalinya Anda mengklik tombol. Karena waspada ('tutup') Jika Anda menggunakan slideUp () berfungsi @ICanHasKittenz
Fatih Alp
Berfungsi bagus, tapi apa baris ini $ ("# success-alert"). Alert (); pemakaian? Saya sudah menghapusnya dan berfungsi juga.
Roberto Sepúlveda Bravo
1
@ RobertoSepúlvedaBravo itu untuk memberikan fungsionalitas dekat ke kotak peringatan tetapi Anda benar, itu tidak diperlukan di sini karena kami menggunakan data-dimiss="alert" atribut. Akan memperbarui skrip.
AyB
Tidak bekerja untuk saya. Contoh lain di bawah sini berfungsi dengan baik.
Terje Nesthus
@TerjeNesthus Bisakah Anda menjelaskan apa yang sebenarnya tidak berhasil? Peringatan tidak meluncur ke atas? Atau tidak bekerja untuk yang kedua kalinya? Bisakah saya tahu versi bootstrap Anda? Ini dimaksudkan untuk Bootstrap 3 dan saya belum mengujinya pada versi yang lebih baru.
AyB
56

Menggunakan fadeTo()kode yang memudar menjadi opacity 500 dalam 2 detik dalam kode "I Can Has Kittenz" tidak dapat dibaca oleh saya. Saya pikir lebih baik menggunakan opsi lain seperti penundaan ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});
Alex Fuentes
sumber
41

Mengapa semua jawaban lain digunakan slideUphanya di luar saya. Karena saya menggunakan fadedan inkelas untuk memiliki peringatan memudar ketika ditutup (atau setelah batas waktu), saya tidak ingin itu "meluncur" dan bertentangan dengan itu.

Lagipula slideUpmetodenya bahkan tidak berhasil. Lansiran itu sendiri tidak muncul sama sekali. Inilah yang bekerja dengan baik untuk saya:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});
ADTC
sumber
1
Singkat dan manis
Nawaraj
21

Saya menemukan ini menjadi solusi yang lebih baik

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
Jaimie
sumber
11

satu lagi solusi untuk ini Secara otomatis menutup atau memudar pesan peringatan bootstrap setelah 5 detik:

Ini adalah kode HTML yang digunakan untuk menampilkan pesan:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="alert alert-danger">
This is an example message...
</div>


<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

Divyesh Kanzariya
sumber
Ini adalah jawaban yang sangat bagus karena tidak terbatas untuk menampilkan pesan tru JS, pesan sudah bisa ditampilkan ketika halaman dimuat.
Guillermo Oramas R.
1
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Di mana parameter fadeTo adalah fadeTo (kecepatan, opacity)

Marwah Abdelaal
sumber
1

Tiggers secara otomatis dan manual bila diperlukan

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}
Arun Prasad ES
sumber
0

Ini adalah pendekatan yang baik untuk menampilkan animasi masuk dan keluar menggunakan jQuery

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });
kamuny
sumber
0

C # Controller:

var result = await _roleManager.CreateAsync(identityRole);
   if (result.Succeeded == true)
       TempData["roleCreateAlert"] = "Added record successfully";

Halaman Cukur:

@if (TempData["roleCreateAlert"] != null)
{
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p>@TempData["roleCreateAlert"]</p>
    </div>
}

Peringatan Otomatis Tutup:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>
RM Shahidul Islam Shahed
sumber