小白教程
所有教程
关于
Search
172.70.130.117
172.70.130.117
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 模态框”的源代码
本页内容
上一节:
Bootstrap5_轮播
下一节:
Bootstrap5_提示框
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 模态框}}[[Category:Bootstrap 5 教程|24]] = Bootstrap5 模态框 = 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 == 如何创建模态框 == 以下实例创建了一个简单的模态框效果 : <sample title="" desc="" lang="html" hererun="1"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> <!-- 模态框 --> <div class="modal" id="myModal"> <div class="modal-dialog"> <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> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <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"> <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> </div> </body> </html> </run> == 添加动画 == 使用 .fade 类可以设置模态框弹出或关闭的效果: <sample title="" desc="" lang="html" hererun="1"> <!-- 添加动画效果 --> <div class="modal fade"></div> <!-- 不使用动画效果 --> <div class="modal"></div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>模态框实例</h3> <p>点击按钮打开模态框</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> </div> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <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> </div> </body> </html> </run> == 模态框尺寸 == 我们可以通过添加 .modal-sm 类来创建一个小模态框,.modal-lg 类可以创建一个大模态框。 尺寸类放在 <div>元素的 .modal-dialog 类后 : == 实例 - 小模态框 == <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-sm"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>模态框实例</h3> <p>点击按钮打开模态框</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> </div> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <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> </div> </body> </html> </run> == 实例 - 大模态框 == <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-lg"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>模态框实例</h3> <p>点击按钮打开模态框</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> </div> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-lg"> <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> </div> </body> </html> </run> == 实例 - 超大模态框 == <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-xl"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>模态框实例</h3> <p>点击按钮打开模态框</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> </div> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-xl"> <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> </div> </body> </html> </run> === 全屏幕显示 === 使用 .modal-fullscreen 类可以让模态框全屏幕显示: == 实例 - 全屏幕显示 == <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-fullscreen"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>模态框实例</h3> <p>点击按钮打开模态框</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开模态框 </button> </div> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-fullscreen"> <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> </div> </body> </html> </run> 使用 .modal-fullscreen-*-* 类可以控制在什么尺寸下全屏幕显示: {| class="table table-striped table-hover" !width="33%"| 类 !width="33%"| 描述 !width="33%"| 实例 |- | <code>.modal-fullscreen-sm-down</code> | 576px 以下尺寸全屏幕显示 | <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>响应式全屏幕模态框实例</h3> <p>modal-fullscreen-sm-down 类在 576px 以下尺寸全屏幕显示。</p> <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-fullscreen-sm-down"> <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> </div> </body> </html> </run> |- | <code>.modal-fullscreen-md-down</code> | 768px 以下尺寸全屏幕显示 | <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>响应式全屏幕模态框实例</h3> <p>modal-fullscreen-md-down 类在 768px 以下尺寸全屏幕显示。</p> <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-fullscreen-md-down"> <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> </div> </body> </html> </run> |- | <code>.modal-fullscreen-lg-down</code> | 992px 以下尺寸全屏幕显示 | <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>响应式全屏幕模态框实例</h3> <p>modal-fullscreen-lg-down 类在 992px 以下尺寸全屏幕显示。</p> <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-fullscreen-lg-down"> <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> </div> </body> </html> </run> |- | <code>.modal-fullscreen-xl-down</code> | 1200px 以下尺寸全屏幕显示 | <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>响应式全屏幕模态框实例</h3> <p>modal-fullscreen-xlg-down 类在 1200px 以下尺寸全屏幕显示。</p> <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-fullscreen-xl-down"> <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> </div> </body> </html> </run> |- | <code>.modal-fullscreen-xxl-down</code> | 1400px 以下尺寸全屏幕显示 | <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>响应式全屏幕模态框实例</h3> <p>modal-fullscreen-xxl-down 类在 1400px 以下尺寸全屏幕显示。</p> <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-fullscreen-xxl-down"> <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> </div> </body> </html> </run> |} == 模态框居中显示 == 使用 .modal-dialog-centered 类可以设置模态框水平和垂直方向都居中显示: <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-dialog-centered"> </sample> <run name=""> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <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> </div> </body> </html> </run> == 模态框滚动条 == 默认情况下模态框如果包含很多内容,页面会自动生成一个滚动,模态框随着页面的滚动而滚动: <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <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"> <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"> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> </div> <!-- 模态框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> </body> </html> </run> 如果我们只想在模态框里头设置一个滚动条,可以使用 .modal-dialog-scrollable 类: <sample title="" desc="" lang="html" hererun="1"> <div class="modal-dialog modal-dialog-scrollable"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <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-scrollable"> <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"> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> 模态框内容..<br /> </div> <!-- 模态框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> </body> </html> </run>
返回至“
Bootstrap5 模态框
”。
上一节:
Bootstrap5_轮播
下一节:
Bootstrap5_提示框