bootstrap4如何设置模态框

互联网 19-7-12

模态框是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

例如，通过点击按钮打开模态框。（推荐学习：Bootstrap视频教程）

<!DOCTYPE html> <html> <head>   <title>Bootstrap 实例</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body>  <div class="container">   <h2>模态框实例</h2>   <!-- 按钮：用于打开模态框 -->   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">     打开模态框   </button>       <!-- 模态框 -->   <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="close" data-dismiss="modal">&times;</button>         </div>             <!-- 模态框主体 -->         <div class="modal-body">           模态框内容..         </div>             <!-- 模态框底部 -->         <div class="modal-footer">           <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>         </div>           </div>     </div>   </div>    </div>  </body> </html>

我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

以上就是bootstrap4如何设置模态框的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： bootstrap