Bootstrap5模态框：弹出式内容展示正确打开方式

Bootstrap5模态框用于页面临时交互（提示、确认、表单等），覆盖底层内容防止干扰。其优势为开箱即用、响应式、灵活可控，依赖Popper.js实现定位。 使用前需引入Bootstrap5 CSS与JS（含Popper）。核心HTML结构：.modal容器包含.modal-dialog（控制尺寸位置）、.modal-content（含.header、.body、.footer）。.header含标题与关闭按钮，.body放内容，.footer放操作按钮。 触发模态框：按钮点击需`data-bs-toggle="modal"`和`data-bs-target="#ID"`；关闭方式有右上角×、ESC键、背景点击、底部按钮，也可通过JS手动控制（`new bootstrap.Modal(modalId).show()`）。 可自定义大小（.modal-sm/lg/xl），注意依赖Popper.js，避免嵌套，表单需防重复提交，长内容可禁用滚动。掌握结构、触发关闭与自定义，即可快速实现弹窗交互。