Bootstrap 5 保姆级教程（十二）：弹出框消息弹窗

一、弹出框

1.1 创建弹出框

通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。

title 属性的内容为弹出框的标题，data-bs-content 属性显示了弹出框的文本内容：

注意: 弹出框要写在 JavaScript 的初始化代码里。

以下实例可以在文档的任何地方使用弹出框：

<div class="container mt-3"><h3>弹出框实例</h3><button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内容">多次点我</button>
</div><script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)
})
</script>

1.2 指定弹出框的位置

默认情况下弹出框显示在元素右侧。

可以使用 data-bs-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

<div class="container mt-3"><h3>指定弹出框的位置</h3><a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="我是内容部分">点我</a><a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="我是内容部分">点我</a><a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="我是内容部分">点我</a><a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="我是内容部分">点我</a>
</div>

1.3 关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-bs-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框：

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-bs-trigger 属性，并设置值为 "hover":

<div class="container mt-3"><h3>弹出框实例</h3><a href="#" title="标题" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="一些内容">鼠标移动到我这</a>
</div>

二、消息弹窗

2.1 创建弹窗

要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。

注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 <button>元素上添加 data-bs-dismiss="toast":

<div class="container mt-3"><h3>弹窗实例</h3><p>弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。。</p><p>在这个页面的实例中我们使用 .show 来设置显示弹窗，可以点击关闭（X）图标来关闭弹窗。</p><div class="toast show"><div class="toast-header"><strong class="me-auto">弹窗标题</strong><button type="button" class="btn-close" data-bs-dismiss="toast"></button></div><div class="toast-body"><p>这是一个Bootstrap 5弹窗示例。</p></div></div>
</div>

要通过点击按钮显示弹窗，您需要使用 JavaScript 对其进行初始化：通过 ID 获取指定元素的点击事件并调用 toast() 方法。

当点击按钮时，以下代码将显示页面中的所有 toast 类：

<div class="container mt-3"><h3>弹窗实例</h3><p>在这个实例中我们通过点击按钮来显示弹窗。</p><button type="button" class="btn btn-primary" id="toastbtn">显示弹窗</button><div class="toast"><div class="toast-header"><strong class="me-auto">弹窗标题</strong><button type="button" class="btn-close" data-bs-dismiss="toast"></button></div><div class="toast-body"><p>这是一个Bootstrap 5弹窗示例。</p></div></div>
</div><script>
document.getElementById("toastbtn").onclick = function() {var toastElList = [].slice.call(document.querySelectorAll('.toast'))var toastList = toastElList.map(function(toastEl) {return new bootstrap.Toast(toastEl)})toastList.forEach(toast => toast.show()) 
}
</script>

将弹窗显示在右下角：

<div class="container mt-5"><button class="btn btn-primary" onclick="showToast()">显示弹窗</button></div><div class="position-fixed bottom-0 end-0 p-3"><div id="toast" 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="Close"></button></div><div class="toast-body">这是一个Bootstrap 5弹窗示例。</div></div></div><script>function showToast() {var toast = new bootstrap.Toast(document.getElementById('toast'));toast.show();}</script>

2.2 设置多个消息弹窗：

<body class="p-3 m-0 border-0 bd-example bd-example-toasts p-0"><!--显示多个弹窗 --><div aria-live="polite" aria-atomic="true" class="position-relative"><!-- Position it: --><!-- - `.toast-container` 设置弹窗直接的空隙 --><!-- - `top-0` & `end-0` 设置弹窗显示位置--><!-- - `.p-3` 设置外边距  --><div class="toast-container top-0 end-0 p-3"><!-- 这里设置多个弹窗代码 --><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg><strong class="me-auto">弹窗实例</strong><small class="text-muted">刚刚</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">这是第二个消息</div></div><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg><strong class="me-auto">弹窗实例</strong><small class="text-muted">2 秒前</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">这是第一个消息</div></div></div></div><!-- 显示多个弹窗 结束 -->
</body>