Bootstrap 5 消息弹窗

基础Toast

使用.toast、.toast-header和.toast-body类创建基础消息弹窗。

基础Toast示例

你好，世界！这是一个消息弹窗。

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 分钟前</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    你好，世界！这是一个消息弹窗。
  </div>
</div>

可触发的Toast

你好，世界！这是一个动态显示的消息弹窗。

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" id="liveToastBtn">显示消息弹窗</button>

<!-- Toast容器 -->
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>刚刚</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
    </div>
    <div class="toast-body">
      你好，世界！这是一个动态显示的消息弹窗。
    </div>
  </div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
  })
}
</script>

位置控制

使用定位工具类控制Toast在屏幕上的显示位置。

不同位置的Toast

左上

中上

右上

左下

中下

右下

这是一个在不同位置显示的消息弹窗。

<!-- 左上角 -->
<div class="toast-container position-fixed top-0 start-0 p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

<!-- 右上角 -->
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

<!-- 左下角 -->
<div class="toast-container position-fixed bottom-0 start-0 p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

<!-- 右下角 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

<!-- 中上 -->
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

<!-- 中下 -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
  <div class="toast" role="alert">
    <!-- Toast内容 -->
  </div>
</div>

自动隐藏

使用data-bs-autohide和data-bs-delay属性控制Toast的自动隐藏行为。

自动隐藏Toast示例

这个消息弹窗将在5秒后自动关闭。

这个消息弹窗不会自动关闭，需要手动点击关闭按钮。

<!-- 自动隐藏Toast -->
<div id="autoHideToast" class="toast" data-bs-autohide="true" data-bs-delay="5000">
  <div class="toast-header">
    <strong class="me-auto">自动隐藏</strong>
    <small>5秒后关闭</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    这个消息弹窗将在5秒后自动关闭。
  </div>
</div>

<!-- 不自动隐藏Toast -->
<div id="noAutoHideToast" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">不自动隐藏</strong>
    <small>需手动关闭</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    这个消息弹窗不会自动关闭，需要手动点击关闭按钮。
  </div>
</div>

堆叠效果

创建多个Toast并让它们堆叠显示。

堆叠Toast示例

<button type="button" class="btn btn-primary" id="stackToastBtn">显示堆叠Toast</button>

<div class="toast-container position-fixed top-0 end-0 p-3" id="stackToastContainer">
  <!-- Toast将通过JavaScript动态添加 -->
</div>

<script>
let toastCount = 0;

document.getElementById('stackToastBtn').addEventListener('click', function() {
    toastCount++;

    const toastElement = document.createElement('div');
    toastElement.className = 'toast';
    toastElement.setAttribute('role', 'alert');
    toastElement.setAttribute('aria-live', 'assertive');
    toastElement.setAttribute('aria-atomic', 'true');
    toastElement.setAttribute('data-bs-autohide', 'true');
    toastElement.setAttribute('data-bs-delay', '5000');

    toastElement.innerHTML = `
        <div class="toast-header">
            <strong class="me-auto">消息 #${toastCount}</strong>
            <small>刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
        </div>
        <div class="toast-body">
            这是第 ${toastCount} 个消息弹窗。
        </div>
    `;

    document.getElementById('stackToastContainer').appendChild(toastElement);

    const toast = new bootstrap.Toast(toastElement);
    toast.show();
});
</script>

颜色变体

使用Bootstrap的颜色工具类创建不同颜色的Toast。

不同颜色的Toast示例

<!-- 主要颜色Toast -->
<div class="toast bg-primary text-white">
  <div class="toast-header bg-primary text-white">
    <strong class="me-auto">主要通知</strong>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    这是一个主要颜色的消息弹窗。
  </div>
</div>

<!-- 成功颜色Toast -->
<div class="toast bg-success text-white">
  <div class="toast-header bg-success text-white">
    <strong class="me-auto">成功通知</strong>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    操作成功完成！
  </div>
</div>

<!-- 危险颜色Toast -->
<div class="toast bg-danger text-white">
  <div class="toast-header bg-danger text-white">
    <strong class="me-auto">错误通知</strong>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    发生了一个错误！
  </div>
</div>

自定义样式

使用自定义CSS为Toast添加独特的样式。

自定义样式Toast示例

这是一个自定义样式的消息弹窗。

<button type="button" class="btn btn-primary" id="customToastBtn">显示自定义Toast</button>

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="customToast" class="toast custom-toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">自定义样式</strong>
      <small>刚刚</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
    </div>
    <div class="toast-body">
      这是一个自定义样式的消息弹窗。
    </div>
  </div>
</div>

<style>
.custom-toast {
    background-color: #6f42c1;
    color: white;
}

.custom-toast .toast-header {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

.custom-toast .btn-close {
    filter: invert(1);
}
</style>

JavaScript控制

使用JavaScript API控制Toast的显示和隐藏。

JavaScript控制示例

这个Toast通过JavaScript API控制。

// 获取Toast元素和实例
const toastElement = document.getElementById('jsToast');
const toast = new bootstrap.Toast(toastElement);

// 显示Toast
document.getElementById('jsShowToastBtn').addEventListener('click', () => {
    toast.show();
});

// 隐藏Toast
document.getElementById('jsHideToastBtn').addEventListener('click', () => {
    toast.hide();
});

// 切换Toast
document.getElementById('jsToggleToastBtn').addEventListener('click', () => {
    toast.toggle();
});

// 销毁Toast
document.getElementById('jsDisposeToastBtn').addEventListener('click', () => {
    toast.dispose();
    alert('Toast实例已销毁，需要重新创建才能使用');
});

// 更新Toast内容
document.getElementById('jsUpdateToastBtn').addEventListener('click', () => {
    const toastBody = toastElement.querySelector('.toast-body');
    toastBody.innerHTML = '内容已更新！' +
        '<div class="mt-2 pt-2 border-top">' +
        '<button type="button" class="btn btn-primary btn-sm" id="jsUpdateToastBtn">再次更新</button>' +
        '</div>';
});

实际应用示例

在实际项目中使用Toast的示例。

表单提交反馈

用户反馈表单

姓名

邮箱

反馈内容

提交成功

您的反馈已成功提交，感谢您的参与！

提交失败

请填写所有必填字段后再提交。

<div class="form-container">
  <h5 class="mb-4">用户反馈表单</h5>

  <div class="mb-3">
    <label for="feedbackName" class="form-label">姓名</label>
    <input type="text" class="form-control" id="feedbackName" placeholder="请输入您的姓名">
  </div>

  <div class="mb-3">
    <label for="feedbackEmail" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="feedbackEmail" placeholder="name@example.com">
  </div>

  <div class="mb-3">
    <label for="feedbackMessage" class="form-label">反馈内容</label>
    <textarea class="form-control" id="feedbackMessage" rows="3" placeholder="请输入您的反馈内容"></textarea>
  </div>

  <button type="button" class="btn btn-primary w-100" id="submitFeedbackBtn">提交反馈</button>
</div>

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="successToast" class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
      <strong class="me-auto">提交成功</strong>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="关闭"></button>
    </div>
    <div class="toast-body">
      您的反馈已成功提交，感谢您的参与！
    </div>
  </div>

  <div id="errorToast" class="toast bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-danger text-white">
      <strong class="me-auto">提交失败</strong>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="关闭"></button>
    </div>
    <div class="toast-body">
      请填写所有必填字段后再提交。
    </div>
  </div>
</div>

<script>
document.getElementById('submitFeedbackBtn').addEventListener('click', function() {
    const name = document.getElementById('feedbackName').value;
    const email = document.getElementById('feedbackEmail').value;
    const message = document.getElementById('feedbackMessage').value;

    if (name && email && message) {
        // 模拟成功提交
        const successToast = new bootstrap.Toast(document.getElementById('successToast'));
        successToast.show();

        // 清空表单
        document.getElementById('feedbackName').value = '';
        document.getElementById('feedbackEmail').value = '';
        document.getElementById('feedbackMessage').value = '';
    } else {
        // 显示错误提示
        const errorToast = new bootstrap.Toast(document.getElementById('errorToast'));
        errorToast.show();
    }
});
</script>

购物车通知

商品一

$19.99

商品二

$29.99

商品三

$39.99

商品已添加到购物车

查看购物车

<div class="row">
  <div class="col-md-4 mb-3">
    <div class="card">
      <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="商品图片">
      <div class="card-body">
        <h5 class="card-title">商品一</h5>
        <p class="card-text">$19.99</p>
        <button class="btn btn-primary add-to-cart-btn" data-product="商品一" data-price="19.99">加入购物车</button>
      </div>
    </div>
  </div>
  <!-- 更多商品... -->
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="cartToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">购物车通知</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
    </div>
    <div class="toast-body">
      <span id="cartToastMessage">商品已添加到购物车</span>
      <div class="mt-2 pt-2 border-top">
        <a href="#" class="btn btn-primary btn-sm">查看购物车</a>
      </div>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.add-to-cart-btn').forEach(button => {
    button.addEventListener('click', function() {
        const product = this.getAttribute('data-product');
        const price = this.getAttribute('data-price');

        // 更新Toast消息
        document.getElementById('cartToastMessage').textContent = `${product} ($${price}) 已添加到购物车`;

        // 显示Toast
        const cartToast = new bootstrap.Toast(document.getElementById('cartToast'));
        cartToast.show();
    });
});
</script>

Bootstrap5教程

Bootstrap5 消息弹窗