Layer与Bootstrap可共存但不能集成，因二者底层逻辑、DOM结构及事件体系互不兼容；强行混用会导致遮罩错位、关闭异常等问题，需明确分工：Bootstrap Modal用于轻量固定对话框，Layer用于重交互定制场景。
Layer 和 Bootstrap 可以共存，但不能“集成”成一个统一组件——Layer 是独立的 jQuery 插件，Bootstrap Modal 是框架内置组件，二者底层逻辑、DOM 结构、事件体系互不兼容。强行混用（比如把 layer.open() 嵌进 .modal 容器里）会导致遮罩层错位、data-bs-dismiss 失效、键盘 Esc 关闭异常等问题。
为什么 layer.open() 会和 Bootstrap 的 CSS/JS 冲突
Layer 默认将弹窗插入 document.body 最末尾，并依赖自身生成的 .layui-layer 类与配套样式；而 Bootstrap Modal 依赖 .modal + .modal-backdrop 的固定结构和 bootstrap.bundle.js 中的 Modal 实例管理。两者同时存在时：
- Layer 的
z-index默认是 1989，Bootstrap 5 的.modal-backdrop是 1050，.modal是 1055 —— 表面能显示，但点击遮罩时可能触发 Bootstrap 的关闭逻辑或 Layer 的关闭逻辑之一，行为不可控 - Layer 的
shadeClose: true和 Bootstrap 的data-bs-backdrop="static"语义冲突，无法协同生效 - Layer 不识别
data-bs-*属性，Bootstrap JS 不监听layer.close()事件，父子页面通信需手动桥接
layer.open() 调用前必须确保的三项准备
不是引入文件就完事，漏掉任一环节都会导致 layer.open is not a function 或弹窗白屏：
-
jQuery必须在layer.js之前加载，且版本 ≥ 1.8（Layer 官方明确要求，jQuery 3.x 兼容但需测试layer.msg()动画） -
layer.js不能通过type="module"加载，必须用传统<script src></script>，否则window.layer不挂载 - 不要同时引入
layui.all.js和独立layer.js—— 会重复定义layer，后者覆盖前者，导致layui.layer失效
如何让 layer 弹窗适配 Bootstrap 页面布局
Layer 本身不依赖 Bootstrap，但内容区域可以复用其栅格、表单、按钮等类名。关键在 content 和 area 配置：
- 若
content是字符串 HTML，直接写class="container p-3"或class="row g-2"，Layer 不干涉内部 class 解析 - 避免用
class="modal-dialog"或class="modal-content"—— 这些类带固定max-width和margin，与 Layer 的area尺寸计算冲突 - 推荐显式设置
area: ['80%', '60%']或['720px', 'auto']，而不是依赖父容器宽度；maxWidth选项在较新 Layer 版本中已废弃，改用area - 如需响应式宽度，用
area: [$(window).width() * 0.9 + 'px', 'auto']并监听resize手动layer.style(index, {width: ...})
父子页通信：layer 子页怎么调用父页 Bootstrap Modal 方法
Layer 子页（iframe 或字符串 content）默认运行在父页上下文，但 iframe 有同源限制；字符串 content 则可直接访问父页函数。常见模式：
- 子页是 iframe 且同源：用
window.parent.$('#myModal').modal('show')，前提是父页已初始化该 Modal 实例 - 子页是字符串 HTML：直接调用
$('#myModal').modal('hide')，或执行父页定义的函数如window.refreshTable() - 关闭 layer 后刷新 Bootstrap Modal 内容：在
layer.open()的end回调里操作，例如：layer.open({ content: '<div><button onclick="parent.layer.close(parent.layer.index)">关闭</button></div>', end: function(){ $('#myTable').DataTable().ajax.reload(); } });
Layer 和 Bootstrap Modal 不是替代关系，而是分工关系：用 Bootstrap Modal 做轻量、结构固定的业务对话框（如确认删除），用 Layer 做重交互、需 iframe 加载或高度定制的场景（如编辑表单弹窗、图片预览）。混用时，永远以 Layer 的生命周期为准，不要试图用 Bootstrap JS 控制 Layer 生成的 DOM。
