बूटस्ट्रैप अलर्ट ऑटो बंद

Question

जब मुझे ऐड टू विशलिस्ट बटन पर क्लिक करना हो तो मुझे कॉल अलर्ट की जरूरत है और 2 सेकंड में अलर्ट को गायब कर देना चाहिए। इस तरह मैंने कोशिश की, लेकिन जैसे ही यह दिखाई दे रहा है, अलर्ट तुरंत गायब हो रहा है। यकीन नहीं है, जहां बग है .. क्या कोई मेरी मदद कर सकता है?

जेएस स्क्रिप्ट

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

Comments

के संभावित डुप्लिकेट stackoverflow.com/questions/16604407/... और stackoverflow.com/questions/7643308/...

— 4dgaurav

मैंने इन प्रवाह की कोशिश की .. लेकिन यकीन नहीं है कि कैसे लागू किया जाए। : /

— srikanth_naalla

Answer 1

एक चिकनी स्लाइडअप के लिए:

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

Comments

यह दूसरी बार काम नहीं कर रहा है जब आपने बटन पर क्लिक किया है। चेतावनी के कारण ('करीब') यदि आप स्लाइडअप का उपयोग करते हैं () यह @ICanHasKittenz काम कर रहा है

— Fatih Alp

सुंदर काम करता है, लेकिन यह लाइन $ क्या है ("# सफलता-चेतावनी")। सतर्क (); उपयोग? मैंने इसे हटा दिया है और काम भी कर रहा हूं।

— रॉबर्टो सिपुलेवेडा ब्रावो

@ RobertoSepúlvedaBravo यह चेतावनी बॉक्स के करीब कार्यक्षमता देने के लिए है, लेकिन आप सही हैं, यह यहाँ की जरूरत नहीं है क्योंकि हम data-dimiss="alert" विशेषता का उपयोग कर रहे हैं । स्क्रिप्ट को अपडेट करेगा।

— अयूब

मेरे लिए काम नहीं किया। हालांकि यहां नीचे के अन्य उदाहरणों ने ठीक काम किया है।

— तेरेजे नेथस

@TerjeNesthus क्या आप बता सकते हैं कि वास्तव में क्या काम नहीं किया? अलर्ट खिसक नहीं रहा है? या यह दूसरी बार काम नहीं कर रहा है? क्या मैं आपके बूटस्ट्रैप का संस्करण जान सकता हूं? यह बूटस्ट्रैप 3 के लिए होना चाहिए था और मैंने बाद के संस्करणों पर उनका परीक्षण नहीं किया है।

— अयब

Answer 2

fadeTo()"I Can Has Kittenz" कोड 2 में 500 सेकंड की अपारदर्शिता का उपयोग करना मेरे लिए पठनीय नहीं है। मुझे लगता है कि देरी () जैसे अन्य विकल्पों का उपयोग करना बेहतर है

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

Answer 3

क्यों अन्य सभी उत्तर का उपयोग slideUpसिर्फ मेरे से परे है। के रूप में मैं fadeऔर inवर्गों का उपयोग कर रहा हूँ जब बंद (या समय समाप्त होने के बाद) चेतावनी को फीका करने के लिए, मैं इसे "स्लाइड अप" और इसके साथ संघर्ष नहीं करना चाहता।

slideUpविधि के अलावा भी काम नहीं किया। खुद अलर्ट बिल्कुल नहीं दिखा। यहाँ मेरे लिए पूरी तरह से काम किया है:

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

Comments

लघु और मधुर

— नवराज

Answer 4

मैंने इसे एक बेहतर समाधान पाया

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

Answer 5

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>

Comments

यह एक बहुत अच्छा जवाब है क्योंकि यह संदेश tru JS को दिखाने तक सीमित नहीं है, पृष्ठ लोड होने पर संदेश पहले ही प्रदर्शित किया जा सकता है।

— गुइलेर्मो ओरामस आर।

Answer 6

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

जहां फीदेवता पैरामीटर फीका है (गति, अस्पष्टता)

Answer 7

जरूरत पड़ने पर स्वचालित रूप से और मैन्युअल रूप से बाघ

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

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

Answer 8

यह jQuery का उपयोग करके एनीमेशन को अंदर और बाहर दिखाने के लिए एक अच्छा तरीका है

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

Answer 9

सी # नियंत्रक:

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>