<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset=
"utf-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link rel=
"stylesheet"
href=
"https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"
>
<script src=
"https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"
></script>
<script src=
"https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"
></script>
<script src=
"https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"
></script>
</head>
<body>
<div
class
=
"container"
>
<h2>模态框实例</h2>
<!-- 按钮:用于打开模态框 -->
<button type=
"button"
class
=
"btn btn-primary"
data-toggle=
"modal"
data-target=
"#myModal"
>
打开模态框
</button>
<!-- 模态框 -->
<div
class
=
"modal fade"
id=
"myModal"
>
<div
class
=
"modal-dialog"
>
<div
class
=
"modal-content"
>
<!-- 模态框头部 -->
<div
class
=
"modal-header"
>
<h4
class
=
"modal-title"
>模态框头部</h4>
<button type=
"button"
class
=
"close"
data-dismiss=
"modal"
>×</button>
</div>
<!-- 模态框主体 -->
<div
class
=
"modal-body"
>
模态框内容..
</div>
<!-- 模态框底部 -->
<div
class
=
"modal-footer"
>
<button type=
"button"
class
=
"btn btn-secondary"
data-dismiss=
"modal"
>关闭</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>