Bootstrap5模态框(弹窗功能)

帆 2024-04-30 0 阅读 评论

  使用 Bootstrap 的 JavaScript 模态插件向您的站点添加对话框,用于灯箱、用户通知或完全自定义的内容。

  需要引用到:

  bootstrap.min.css文件

  bootstrap.bundle.js文件

  而Bootstrap模态框是由几个组件组成的:

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">演示模态框
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">  <!-- 对应模态框的大小以及动作 -->
  <div class="modal-content">
  <div class="modal-header">
  头部
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
  内容
  </div>
  <div class="modal-footer">
  底部
  </div>
  </div>
  </div>
  </div>

  主要:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。

Bootstrap5模态框(弹窗功能)


文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为时光荏苒原创文章,转载或复制请以超链接形式并注明出处。

上一篇:

下一篇:导航字体颜色修改