前端学习-bootstrap框架之模态框01
- 模态框注意事项
- 必须独立放在body里，默认是不显示的
- 务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性，用于指向模态框的标题栏
- 点击事件触发模态框有2种方法，第一种如本例的无需js，只要按钮中添加
data-toggle="modal"及data-target="#myModal"执行模态框div的id属性，就可以点击无需js触发模态框，常用语一些提示信息，如看某个事物的详情等等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>模态框</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal 按钮联动模态框-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
模态框操作按钮
</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myFirstModal" id="myModal">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<!-- 模态框右上角关闭按钮，基本都这样写 -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">模态框左上角标题</h4>
</div>
<div class="modal-body">
<p>模态框内容部分: 如果不通过js操作调用模态框，可以在.modal 加入data-target="#myModal"指向模态框，
也可以调出模态框，但这种没有办法执行其他操作了，只能是看看</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
人生苦短，我用python！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
2019-04-19 Bootstrap登录样式
2019-04-19 前端jq实现菜单的收放