如何解决如何在没有 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 举报，一经查实，本站将立刻删除。
