<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 打开模态框的按钮-->
<button class="btn btn-danger" data-toggle="modal"
data-target="#demo">打开模态框
</button>
<!-- 模态框的内容-->
<!--1--> <div id="demo" class="modal"><!--固定定位-->
<!--2--> <div class="modal-dialog"><!--响应式-->
<!--3--> <div class="modal-content"><!--弹性-->
<div class="modal-header">
<h4>模态框标题</h4>
<button class="close"
type="button"
data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Excepturi, vero!
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-dismiss="modal">关闭
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
模态框
最新推荐文章于 2024-07-20 17:41:17 发布