模式就像一个小窗口，在关闭之前阻止其他操作。其他操作包括单击模式外的链接。模式也称为弹出窗口。它也用于广告。
注意：我们在这节课中使用的Bootsrap是5.3版本，所以正式文件如下。因为Bootstrap的版本不一样，所使用的启动弹窗的Javascript也不一样，请大家注意。
运行原理
在开始实施模态之前，请看一下下面的解释
1）弹窗是用 HTML、CSS 和 JavaScript 构建的。在弹窗中禁用滚动，单击模态“背景”将自动关闭模态。
2）屏幕上一次只支持一个模式。不支持嵌套模式，因为它们会降低用户体验。
3）用[position: fixed]。将模态 HTML 置于顶部以避免其他元素的潜在干扰。将 [.modal’] 嵌套在另一个固定元素中会导致问题。
4)用[position：fixed]，在移动设备上使用模式有一些注意事项。请参阅我们的浏览器支持文档。
5)由于 HTML5 定义其语义的方式，HTMLautofocus属性对 Bootstrap 没有影响。要达到相同的效果，请使用自定义 JavaScript：
注意：我们在这节课中使用的Bootsrap是5.3版本，所以正式文件如下。因为Bootstrap的版本不一样，所使用的启动弹窗的Javascript也不一样，请大家注意。
版本5.3。https://getbootstrap.com/docs/5.3/components/modal/#static-backdrop
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
modal sample botton
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>版本4.2：Modal(Static backdrop)
https://getbootstrap.jp/docs/4.2/components/modal/
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Launch demo modal</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
modal sample button
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>例子
弹窗组件
下面是一个静态弹窗的例子。（意味着positionanddisplay被覆盖）该示例具有页眉、正文和页脚。
现场演示
1）单击下面的按钮切换工作模式演示。它将向下滑动并从页面顶部淡入。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
弹窗的样本
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">弹窗的标题</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
弹窗的内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>还有很多样本，大家可以参考一下Bootstrap的官方网站。
https://getbootstrap.com/docs/5.3/components/modal/#static-backdrop
