如何在没有 jQuery 的情况下自动关闭 Bootstrap 5 警报

问题描述

现在 Bootstrap 5 已经删除了 jQuery 作为依赖项，我试图找到一种方法来在指定的时间后仅使用原始 Javascript 自动关闭警报。以下是我到目前为止所提出的一个片段。毫无疑问，有一种方法可以优化此方法和/或可能是一种更好的方法。如果是这样，请告诉我。

<!doctype html>
<html lang="en">
<head>
  <!-- required Meta tags -->
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

  <title>Hello,world!</title>
</head>

<body>
  <div id="alertID" class="alert alert-success fade show mt-1" role="alert">
    Alert text here!
  </div>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  <!-- Autodismiss alert -->
  <script type="text/javascript">
    // Enable dismissal of an alert via JavaScript:
    var alertList = document.querySelectorAll('.alert')
    alertList.forEach(function(alert) {
      new bootstrap.Alert(alert)
    })

    // Get the alert element
    // var alertQs = document.querySelector('.alert')  // This line would target all alerts on the page
    var alertQs = document.querySelector('#alertID') // This line only targets the element with ID #alertID
    // Create a Bootstrap alert instance
    var bsAlert = bootstrap.Alert.getInstance(alertQs)
    // dismiss alert after specified amount of time in milliseconds
    window.setTimeout(() => { bsAlert.close(); },2000);
  </script>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript twitter-bootstrap-5