使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

时间:2023-03-09 07:21:07
使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

------------------------------------------20180410补充---------------------------------------------------------------------------------------------

今天发现,原来不需要调整的layer弹窗也无法弹出了,

对比了代码版本,发现是因为今天调试代码的时候用了dump打印数据

紧接着我又试了下  echo ,print_r ,var_dump等输出打印形式

发现,TP的dump方法直接会导致弹窗不可见

而PHP原生的echo,print_r,var_dump,会导致弹窗位置不为屏幕*

删掉输出函数之后,果然弹窗又正常了。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

最近和前端进行交互的时候,出现了两次如题所述的问题

第一次出现时百思不得解,暂时就先放下了

第二次又出现这个问题的时候,那真是百爪挠心了!

幸而灵机一动,使用f12查看页面元素的变化,结果成功找到了原因

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

如图所示,我们看到layer的弹窗确实是已经触发了,元素也已经追加到了网页中,但是却看不出来变化!

不急,选中这段代码,我们来看看它的样式

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

这样,我们又发现了问题,z-index设置的很大,肯定是想让弹窗始终保持在顶层的,

但是这个top的值又未免太大了吧?!

于是我尝试将其调整小一点

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

如上图所示,top改为100px之后,页面中已经可以捕捉到弹出层的元素位置了,但是貌似z-index还小?但是默认的z-index已经很大很大了呀

于是我又查看了自己的遮罩层的z-index

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

显然不应该因为这个导致layer弹窗被覆盖啊。

没办法走一步算一步,我就尝试使用js更改这个弹窗元素按照自己调试的结果进行更改

重点来了,layer的样式是行内的,我们也就只能使用行内的样式才能覆盖系统默认的样式了

所以:

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

结果来了!

使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

总结:出现layer的问题,一般都是自己的弹出层和layer弹出层出现了冲突。

  所以最好的解决方案,当然是从源头上,自己的弹窗也使用layer.open来构建,这样就不会有冲突了

当然,既然问题已经出现了,那就试试上述方法来调整样式吧!