Как автоматически закрыть предупреждение через несколько секунд с помощью Bootstrap?

Я разработал приложение Python / Flask и столкнулся с проблемой при реализации предупреждения Bootstrap, идея которого заключается в следующем:

  • можно отключить с помощью кнопки закрытия.
  • исчезнет и закроется через 2 секунды, если не будет предпринято никаких действий.

Код

<div class="container">
        {% for message in get_flashed_messages() %}   
        <script>       
          function close_alert()
          {
            document.getElementById("my_alert").close()
          }
          setTimeout("close_alert()", 2000)
        </script>
        <div id="my_alert" class="alert alert-primary alert-dismissible fade show" role="alert">
          <strong>{{message}}</strong>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
</div>

Я новичок в Bootstrap и буду признателен за любую поддержку!

Спасибо!


javascript html alert twitter-bootstrap auto-close
person ftani    schedule 28.06.2021    source источник
comment
Вы можете использовать .hide() вместо .close() в функции close_alert.   -  person charchit    schedule 28.06.2021

Ответы (2)


arrow_upward
0
arrow_downward

Используйте методы Bootstrap для достижения своих целей, посмотрите здесь

$('#show').click(function(){
  $('#alert').removeClass('d-none')
  setTimeout(function(){
    $('.alert').alert('close')
  }, 2000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
<div class="container">
  <div id="alert" class="alert alert-primary mt-2 d-none" role="alert">
    This is a primary alert—check it out!
  </div>
</div>
   
<center><https://stackoverflow.com/posts/68165975/edit#button class="btn btn-primary mt-2" id="show">
  show alert and close it in 2s
 </button></center>

person Gass    schedule 28.06.2021
comment
Спасибо, @Gass! Я предполагаю, что с моим загрузчиком что-то не так, когда я пытался сделать это с помощью v5, теперь, когда я переключился на v4.6 и использовал ваше предложение, все работает хорошо. Я внес небольшие изменения в код, чтобы удовлетворить свои потребности: - person ftani; 01.07.2021
comment
HTML - ›‹ div id = alert class = alert alert-success role = alert ›{{message}} ‹/div› - person ftani; 01.07.2021
comment
JS - ›setTimeout (function () {$ ('. Alert'). Alert ('close')}, 2000) - person ftani; 01.07.2021
comment
@ftani Да, это то, что тебе нужно. Мне пришлось добавить больше кода, чтобы он работал здесь. Я рад, что это помогло. - person Gass; 01.07.2021

arrow_upward
0
arrow_downward

Я бы посоветовал использовать тост - это компонент пользовательского интерфейса, предназначенный для вашего варианта использования: https://getbootstrap.com/docs/4.2/components/toasts/

введите описание изображения здесь Из документации Bootstrap:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

person Matt Morgan    schedule 28.06.2021
comment
Спасибо, @Matt Morgan! Для проекта, который я имею в виду, Alert больше подходит, чем Toast. - person ftani; 01.07.2021