<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Bootstrap 4 模态框</title>
</head>
<body>
<div class="container mt-4">
<h2>模态框示例</h2>
<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>这是模态框的内容。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中，我们使用了 data-toggle 和 data-target 属性来指定按钮与模态框的关联。模态框由 modal、modal-dialog 和 modal-content 类组成，包含标题（modal-title）、关闭按钮（close）、模态框内容（modal-body）和底部按钮组（modal-footer）。
你可以根据实际需求添加更多的内容和样式，包括使用 JavaScript 来处理模态框的显示和隐藏。这只是一个简单的示例，你可以根据需要进行更多的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/5503/Bootstrap