Bootstrap Alert ปิดอัตโนมัติ


153

ความต้องการของฉันคือโทรแจ้งเตือนเมื่อฉันคลิกที่ปุ่มเพิ่มไปยังสิ่งที่ปรารถนาและควรหายไปการแจ้งเตือนใน 2 วินาที นี่คือวิธีที่ฉันลอง แต่การแจ้งเตือนจะหายไปทันทีที่ปรากฏขึ้น ไม่แน่ใจว่าข้อผิดพลาดอยู่ที่ไหน .. ใครช่วยฉันได้บ้าง

สคริปต์ JS

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

รหัส 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>

กล่องแจ้งเตือน:

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

1
ทำซ้ำเป็นไปได้ของstackoverflow.com/questions/16604407/… และ stackoverflow.com/questions/7643308/…
4dgaurav

ฉันลองใช้ flow เหล่านี้ .. แต่ไม่แน่ใจว่าจะใช้งานอย่างไร : /
srikanth_naalla

คำตอบ:


276

สำหรับสไลด์อัพที่ราบรื่น:

$("#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>


3
มันไม่ทำงานครั้งที่สองที่คุณคลิกปุ่ม เนื่องจากการเตือน ('ปิด') หากคุณใช้ slideUp () มันใช้งานได้ @ICanHasKittenz
Fatih Alp

ใช้งานได้ดี แต่บรรทัดนี้ $ ("# success-alert"). alert (); การใช้งาน? ฉันลบมันแล้วก็ทำงานได้เหมือนกัน
Roberto Sepúlveda Bravo

1
@ RobertoSepúlvedaBravoมันจะให้ฟังก์ชั่นปิดไปยังกล่องเตือน แต่คุณพูดถูกมันไม่จำเป็นที่นี่เพราะเรากำลังใช้data-dimiss="alert" คุณลักษณะ จะอัปเดตสคริปต์
AyB

ไม่ได้ผลสำหรับฉัน ตัวอย่างด้านล่างอื่น ๆ ที่นี่ทำงานได้ดี
Terje Nesthus

@TerjeNesthus คุณช่วยอธิบายได้ไหมว่าอะไรไม่ได้ผล? การแจ้งเตือนไม่เลื่อนขึ้น? หรือมันไม่ทำงานครั้งที่สอง? ฉันจะรู้เวอร์ชั่นของ bootstrap ของคุณได้ไหม? สิ่งนี้มีไว้สำหรับ Bootstrap 3 และฉันไม่ได้ทดสอบพวกเขาในรุ่นที่ใหม่กว่า
AyB

56

การใช้fadeTo()ที่จางหายไปสู่ความทึบ 500 ใน 2 วินาทีในรหัส "ฉันสามารถมี Kittenz" ไม่สามารถอ่านได้ ฉันคิดว่ามันจะดีกว่าถ้าใช้ตัวเลือกอื่นเช่นความล่าช้า ()

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

42

ทำไมคำตอบอื่น ๆ ที่ใช้slideUpอยู่นอกเหนือฉัน ขณะที่ฉันใช้fadeและinคลาสเพื่อให้การแจ้งเตือนจางหายไปเมื่อปิด (หรือหลังจากหมดเวลา) ฉันไม่ต้องการให้ "เลื่อนขึ้น" และขัดแย้งกับสิ่งนั้น

นอกจากslideUpวิธีที่ใช้ไม่ได้ผล การแจ้งเตือนเองไม่แสดงเลย นี่คือสิ่งที่ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});

1
สั้นและหวาน
Nawaraj

21

ฉันพบว่านี่เป็นทางออกที่ดีกว่า

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

11

อีกหนึ่งวิธีแก้ไขปัญหานี้โดยอัตโนมัติปิดหรือหายไปข้อความแจ้งเตือน bootstrap หลังจาก 5 วินาที:

นี่คือรหัส HTML ที่ใช้แสดงข้อความ:

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


นี่เป็นคำตอบที่ดีมากเพราะมันไม่ได้ จำกัด การแสดงข้อความ tru JS ข้อความอาจถูกแสดงเมื่อเพจโหลด
Guillermo Oramas R.

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

โดยที่ fadeTo พารามิเตอร์เป็น fadeTo (ความเร็วความทึบ)


1

Tiggers โดยอัตโนมัติและด้วยตนเองเมื่อจำเป็น

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

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

0

นี่เป็นวิธีที่ดีในการแสดงภาพเคลื่อนไหวเข้าและออกโดยใช้ jQuery

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

0

ตัวควบคุม C #:

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

หน้ามีดโกน:

@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>
}

ปิดการแจ้งเตือนอัตโนมัติใด ๆ :

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.