bootstrap--模态框
bootstrap4虽然完全不依赖jquery,但是,模态框的弹出动作还是依赖jquery的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的模态框</title>
<link rel="stylesheet" href="plugins/bootstrap-4.3.1/bootstrap.min.css">
</head>
<body>
<!-- 关键部分1: 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#ModalId">
点击弹出模态框
</button>
<!-- 模态框 -->
<!-- 最外层的三个标签基本不需要改,唯独第1层标签中的id要改,要和自己button的data-target属性相对应 -->
<div class="modal fade" id="ModalId" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- 关键部分2, 模态框的三部分:头部,主体,底部 -->
<!-- 模态框头部 -->
<div class="modal-header">
<!-- 模态框标题 -->
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<!-- 关闭(左上角的小x) -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
模态框内容
</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>
</body>
<!-- 引入依赖的js 文件, 注意先后顺序 -->
<script src="plugins/jquery-3.7.1.min.js"></script>
<script src="plugins/bootstrap-4.3.1/bootstrap.min.js"></script>
</html>
