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

作者：秋刀鱼在做梦 | 2024-06-25 15:29:49

踩

bootstrap 弹窗

一、弹出框

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/756636