বুটস্ট্র্যাপ সতর্কতা অটো বন্ধ

Question

আমার প্রয়োজন হ'ল সতর্কতা অবলম্বন করা যখন আমি পছন্দ তালিকার বোতামে ক্লিক করি এবং 2 সেকেন্ডের মধ্যে সতর্কতাটি অদৃশ্য হয়ে যায়। এইভাবে আমি চেষ্টা করেছি, তবে সতর্কতাটি উপস্থিত হওয়ার সাথে সাথে ততক্ষণে অদৃশ্য হয়ে যাবে। নিশ্চিত নয়, বাগটি কোথায় আছে .. কেউ কি আমাকে সাহায্য করতে পারে?

জেএস স্ক্রিপ্ট

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

এইচটিএমএল কোড:

<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

আপনি বোতামটি ক্লিক করার পরে এটি দ্বিতীয়বার কাজ করছে না। সতর্কতার কারণে ('বন্ধ') আপনি স্লাইডআপ () ব্যবহার করেন যদি এটি কাজ করছে @ আইকানহ্যাসকিটেনজ

— ফাতিহ

সুন্দর কাজ করে, তবে এই লাইনটি কী $ ("# সাফল্য-সতর্কতা")। সতর্কতা (); ব্যবহার? আমি এটিকে সরিয়ে দিয়েছি এবং কাজও করছি।

— রবার্তো সেপলভেদা ব্রাভো

@ রবার্তোসেপলভেদ ব্রাভো এটি সতর্কতা বাক্সে ঘনিষ্ঠ কার্যকারিতা দেবে কিন্তু আপনি ঠিক বলেছেন, এখানে এটির দরকার নেই কারণ আমরা গুণাবলীটি ব্যবহার করছি data-dimiss="alert" । স্ক্রিপ্ট আপডেট করবে।

— আইআইবি

আমার পক্ষে কাজ করেনি। নীচের অন্যান্য উদাহরণগুলি অবশ্য কাজ করেছে।

— তেরজে নেসথাস

@ তেরজেনেথাস আপনি ঠিক কী কাজ করেনি তা ব্যাখ্যা করতে পারবেন? সতর্কতা পিছলে যাচ্ছে না? নাকি এটি দ্বিতীয়বার কাজ করছে না? আমি কি আপনার বুটস্ট্র্যাপের সংস্করণটি জানতে পারি? এটি বুটস্ট্র্যাপ 3 এর জন্য বোঝানো হয়েছিল এবং আমি পরবর্তী সংস্করণগুলিতে সেগুলি পরীক্ষা করিনি।

— আইবিবি

Answer 2

একটি ব্যবহার fadeTo()এর কোডে "আমি পারে 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 সেকেন্ডের পরে বুটস্ট্র্যাপ সতর্কতা বার্তাটি বন্ধ বা বিবর্ণ করুন:

এই বার্তাটি প্রদর্শনের জন্য ব্যবহৃত এইচটিএমএল কোড:

<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

এটি খুব সুন্দর উত্তরের কারণ এটি টিআরএস জেএস বার্তাটি দেখানোর মধ্যে সীমাবদ্ধ নয়, পৃষ্ঠাটি লোড হওয়ার পরে বার্তাটি ইতিমধ্যে প্রদর্শিত হতে পারে।

— গিলারমো ওরামাস আর।

Answer 6

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

যেখানে fadeTo পরামিতিগুলি fadeTo (গতি, অস্বচ্ছতা)

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>