layui layer弹窗被Flash遮挡的根本原因是Flash默认wmode=window,需将wmode设为opaque(同时修改object的param和embed属性),再通过layer皮肤隔离和组件定位补救。

layui layer弹窗被页面中Flash插件(如旧版SWF嵌入)遮挡,导致下拉框、日期选择器、提示浮层等元素不可见,根本原因是Flash默认以最高窗口层级(wmode=window)渲染,会强制压在所有CSS层叠上下文之上,z-index完全无效。
确认Flash是否启用wmode=window
检查页面中所有<object></object>或<embed></embed>标签,查找wmode参数值。若缺失或值为window,即为遮挡根源。
这一步必须做——不改Flash参数,后面所有layer配置都是白忙。
强制Flash使用wmode=opaque
方法一:修改HTML嵌入代码(推荐,一劳永逸)
将原Flash嵌入代码中的wmode显式设为opaque,并确保同时存在于<param>和<embed></embed>中:
<object ...><param name="wmode" value="opaque">
<embed wmode="opaque" ...></embed></object>
注意:只改<param>或只改<embed></embed>都不完整,两者必须同步设置,否则部分浏览器(如IE11)仍按默认window模式加载。
方法二:JS动态注入wmode(适用于Flash由第三方SDK或旧系统自动生成)
在Flash DOM节点插入后、layer弹窗打开前执行:
$('object, embed').filter('[type="application/x-shockwave-flash"]').each(function(){ $(this).attr('wmode', 'opaque'); if(this.tagName === 'OBJECT') { $(this).find('param[name="wmode"]').length ? $(this).find('param[name="wmode"]').attr('value', 'opaque') : $(this).prepend('<param name="wmode" value="opaque">'); } });
这步操作起来很简单,直接把脚本塞进layer.open()调用前即可。
layer弹窗内组件适配补救
第一步:给layer加skin隔离样式作用域
定义CSS:
.flash-safe-skin .layui-layer-content { overflow: visible !important; }
调用layer时传入:skin: 'flash-safe-skin'。
第二步:对关键组件启用脱离容器定位
在success回调中初始化组件,避开Flash裁剪干扰:
laydate用position: 'fixed' + trigger: 'click';
select用lay-append-to="body" + lay-append-position="fixed";
tips用tipsMore: true并确保tips: [1, '#fff']中方向值不为0(避免贴顶触发Flash重绘)。
务必在success里执行——DOM未挂载就初始化,组件会绑定到错误位置。


















