使用 Bootstrap 的 JavaScript 模态插件向您的站点添加对话框，用于灯箱、用户通知或完全自定义的内容。

　　需要引用到：

　　bootstrap.min.css文件

　　bootstrap.bundle.js文件

而Bootstrap模态框是由几个组件组成的：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">演示模态框
</button>
		
<!-- Modal -->
<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog">  <!-- 对应模态框的大小以及动作 -->
	   <div class="modal-content">   
		 <div class="modal-header">
		   头部
		   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		 </div>
		 <div class="modal-body">
		   内容
		 </div>
		 <div class="modal-footer">
		   底部
		 </div>
	   </div>
	 </div> 
</div>

主要：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。