基本使用

注

• 默认情况下会组件使用 Top Layer Dialog（若支持），此时即使不渲染 mask，也无法与弹框之外的元素交互。若需要在无 mask 时与其他元素交互，请设置noTopLayer，非 Top Layer 的弹框由于为 fixed 定位，会受父级Containing Block影响
• 浏览器默认会将焦点限制在 Top Layer Dialog 内部，但需要注意的是在聚焦到最后一个元素后，再使用 Tab 导航并不会跳回第一个可聚焦元素。然而在开启noTopLayer时，内部模拟的 focus trap 则会在弹框内部循环聚焦。如果需要 Top Layer Dialog 也遵循这个行为，请使用alwaysTrapFocus属性。
• 如果弹框为 Top Layer 或存在蒙层，打开弹框时内部将会锁定页面或其所在容器的滚动，直至最后一个锁定的弹框关闭。如果需要禁用此行为，请设置noLockScroll

静态方法

Dialog有一些静态方法，用于方便在 js 中直接创建并打开弹框

注

destroyAll方法可以直接销毁所有由静态方法创建的弹框，由于是直接从文档中移除，所以不会触发close或afterClose事件，想要正常关闭所有可以使用closeAll方法

嵌套

嵌套打开多个模态框时只会展示一个蒙层，不会因为多个蒙层而越来越黑

自定义拖拽

如第一个示例所示，设置headerDraggable便可以拖拽弹框的头部来移动弹框。如果想要自定义拖拽元素，则可以通过customDraggable属性指定弹框内部哪些元素可拖拽

注

为方便选中文字，在按住 Alt 时不会触发拖拽

容器内展示

想要l-dialog在某个容器里展示，其必须设置noTopLayer，并放置于对应容器内，对应容器需要为 fixed 元素的 Containing Block。与全屏打开的弹框类似，容器内的弹框也拥有锁定容器滚动、只展示一个蒙层等特性，如果开启拖拽，弹窗也会被限制在容器内移动。

注

当容器内的弹框开启拖拽之后，由于默认使用了 transform 定位，这会更改子元素的 Containing Block，导致嵌套的弹框定位异常，如果有类似需求，可设置noTransform属性，更改为 left/top 定位