Layui弹出层如何设置点击遮罩层后不关闭弹窗而是执行抖动动画-Layui教程-PHP中文网

结论是必须在success回调中精准获取当前遮罩节点并手动绑定click事件，禁用shadeclose后自行控制抖动；不能依赖外部委托或anim参数，移动端需条件禁用抖动以防卡顿。

直接说结论：不能靠 shadeclose: false + 自定义抖动就完事。遮罩层点击事件默认会冒泡到 .layui-layer-shade，而 layui 内部对它的 click 监听是硬编码的——只要 shade 存在且 shadeclose: true，点它就会关窗；设成 false 则完全不响应，你连抖动都触发不了。必须把遮罩层“借”过来自己管。

怎么让点击遮罩层触发抖动而不是关闭

核心思路是：保留遮罩层（即 shade 不为 0），但禁用 layui 默认的关闭逻辑，再手动监听遮罩层 click 并执行抖动。关键步骤如下：

设置 shade: 0.3（或其他非 0 值），确保遮罩 DOM 存在且可绑定事件
显式设置 shadeClose: false，切断 layui 的自动关闭链路
在 success 回调里，用 $(layero).prev('.layui-layer-shade') 找到遮罩元素并绑定 click
抖动目标必须是弹层内容区（如 .layui-layer-content），不是遮罩本身
抖动完立刻移除 class，避免重复点击叠加动画

示例代码：

layer.open({
  type: 1,
  content: '<div class="my-form">表单内容</div>',
  shade: 0.3,
  shadeClose: false,
  success: function(layero) {
    const $shade = $(layero).prev('.layui-layer-shade');
    $shade.on('click', function() {
      const $content = $(layero).find('.layui-layer-content');
      $content.addClass('shake');
      setTimeout(() => $content.removeClass('shake'), 400);
    });
  }
});