Bootstrap 5中能否仅通过HTML实现按钮触发Toast弹窗？

问题描述 #

我有一个包含按钮和Toast的Bootstrap页面，已在页面加载时用JavaScript完成Toast初始化。现在希望点击按钮显示Toast，有以下疑问：

• 能否仅通过HTML实现该功能，还是必须手动用JavaScript绑定按钮与Toast的事件？
• 我以为初始化后配置就就绪了，但点击按钮无任何反应，这是为什么？
• Bootstrap是如何关联按钮与Toast的？

页面代码如下：

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  </head>

  <body>

    <div class="container mt-5">
        <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
          <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <strong class="me-auto">Bootstrap</strong>
              <small>11 mins ago</small>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                <span>&times;</span>
              </button>
            </div>
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
          </div>
        </div>

    </div>

    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
    <script>
      let toastEl = document.querySelector('.toast');
      let toast = new bootstrap.Toast(toastEl, { autohide: false })
      //toast.show()
    </script>
  </body>

</html>

解答 #

1. 能否仅通过HTML实现按钮触发Toast？ #

不能。Bootstrap 5（包括你使用的5.0.0-alpha1版本）的Toast组件不支持纯HTML触发，必须通过JavaScript绑定按钮的点击事件，调用Toast实例的show()方法才能显示Toast。

2. 初始化后点击按钮无反应的原因 #

你仅完成了Toast的实例化和参数配置，但没有给按钮添加任何点击事件逻辑。初始化只是创建了Toast实例，设置了如autohide: false这类参数，但Bootstrap不会自动将按钮点击与Toast显示关联起来，所以点击按钮时没有触发Toast的动作。

3. Bootstrap如何关联按钮与Toast？ #

Bootstrap不会自动关联，需要你手动编写事件绑定代码：

• 获取按钮元素
• 为按钮添加click事件监听器
• 在事件回调中调用Toast实例的show()方法

修改后可正常运行的代码 #

只需在原有JavaScript代码中添加按钮事件绑定：

let toastEl = document.querySelector('.toast');
let toast = new bootstrap.Toast(toastEl, { autohide: false });

// 绑定按钮点击事件
document.getElementById('liveToastBtn').addEventListener('click', function() {
  toast.show();
});

另外，你代码中关闭按钮的data-dismiss="toast"属性是Bootstrap支持的纯HTML关闭方式，无需额外编写JS，Bootstrap已内置对该属性的事件监听。

内容的提问来源于stack exchange，提问作者halloleo