Bootstrap5 模态框

用户名：admin

Bootstrap教程  | 阅读: 45

发表：湖南  2025/8/15 9:41:20

未关注

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。添加动画 使用 .fade 类可以设置模态框弹出或关闭的效果:模态框尺寸 我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。 尺寸类放在
元素的 .modal-dialog 类后 :全屏幕显示 使用 .modal-fullscreen 类可以让模态框全屏幕显示: 模态框居中显示 使用 .modal-dialog-centered 类可以设置模态框水平和垂直方向都居中显示: 模态框滚动条 默认情况下模态框如果包含很多内容，页面会自动生成一个滚动，模态框随着页面的滚动而滚动: 如果我们只想在模态框里头设置一个滚动条，可以使用 .modal-dialog-scrollable 类：

水平和垂直方向都居中显示

点击按钮打开模态框

  <h3>水平和垂直方向都居中显示</h3>
  <p>点击按钮打开模态框</p>
  
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    打开模态框
  </button>
</div>
 
<!-- 模态框 -->
<div class="modal" id="myModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
 
      <!-- 模态框内容 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>
 
    </div>
</div>
上一篇：   Bootstrap5 字体颜色
下一篇：   Bootstrap5 轮播
  热门博主
用户名：eketeam E客低代码研究
关注
用户名：jkxx 中小学教育
关注
用户名：luoguangyi 菜鸟开源技术交流
关注
用户名：admin Bootstrap教程
关注
用户名：cainiao 菜鸟开源官方账号
关注
用户名：cainiao2025 SQL学习交流
关注
用户名：cainiao20251 CSS研究
关注
用户名：dell 电脑部落
关注
用户名：tsg 前端浅学
关注
用户名：tiyanvip 后端小白
关注
  最新文章
平台数据结构(8) 平台数据结构(8)
平台数据结构(7) 平台数据结构(7)
平台数据结构(6) 平台数据结构(6)
平台数据结（5） 平台数据结（5）
平台数据结构(4) 平台数据结构(4)
平台数据结构(3) 平台数据结构(3)
平台数据结构(2) 平台数据结构(2)
菜鸟开源开放用户注册 菜鸟开源开放用户注册
视觉画廊照片时光机模板 视觉画廊照片时光机模板
一个精美的动态个人主页模板 一个精美的动态个人主页模板
 热门文章
菜鸟云网络科技简介 菜鸟云网络科技简介
菜鸟云网络科技个性化定制中心 菜鸟云网络科技个性化定制中心
菜鸟网络学院简介 菜鸟网络学院简介
Bootstrap5 教程 Bootstrap5 教程
《文化苦旅》散文集 《文化苦旅》散文集
谢谢你曾来过我的世界 谢谢你曾来过我的世界
关于做好2025年普通高中学业水平合格性考试统考工作的通知 关于做好2025年普通高中学业水平合格性考试统考工作的通知
Bootstrap5 网格系统 Bootstrap5 网格系统
Bootstrap5 安装使用 Bootstrap5 安装使用
CSS3 圆角 CSS3 圆角