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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异