前端学习-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！
