使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路
------------------------------------------20180410补充---------------------------------------------------------------------------------------------
今天发现,原来不需要调整的layer弹窗也无法弹出了,
对比了代码版本,发现是因为今天调试代码的时候用了dump打印数据
紧接着我又试了下 echo ,print_r ,var_dump等输出打印形式
发现,TP的dump方法直接会导致弹窗不可见
而PHP原生的echo,print_r,var_dump,会导致弹窗位置不为屏幕中央
删掉输出函数之后,果然弹窗又正常了。
-----------------------------------------------------------------------------------------------------------------------------------------------------------
最近和前端进行交互的时候,出现了两次如题所述的问题
第一次出现时百思不得解,暂时就先放下了
第二次又出现这个问题的时候,那真是百爪挠心了!
幸而灵机一动,使用f12查看页面元素的变化,结果成功找到了原因

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

这样,我们又发现了问题,z-index设置的很大,肯定是想让弹窗始终保持在顶层的,
但是这个top的值又未免太大了吧?!
于是我尝试将其调整小一点

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

显然不应该因为这个导致layer弹窗被覆盖啊。
没办法走一步算一步,我就尝试使用js更改这个弹窗元素按照自己调试的结果进行更改
重点来了,layer的样式是行内的,我们也就只能使用行内的样式才能覆盖系统默认的样式了
所以:

结果来了!

总结:出现layer的问题,一般都是自己的弹出层和layer弹出层出现了冲突。
所以最好的解决方案,当然是从源头上,自己的弹窗也使用layer.open来构建,这样就不会有冲突了
当然,既然问题已经出现了,那就试试上述方法来调整样式吧!
使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路的更多相关文章
- layer打开弹窗时传递参数(content:)
在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断.直接就可以用链接+参数的方式即可. js var userGrade=Mrant layer.open({ title: '权限管理', ...
- Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错,
Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错, 这里总结一些可能的原因和解决方案,给需要的朋友: 说道undefined reference err ...
- 使用wkwebview时,push后,再pop返回,报错
使用wkwebview时,push后,再pop返回,报错 Cannot form weak reference to instance (xxxx) of class xxxx. It is poss ...
- 引入代码后,在@override报错
最近引入了spring的源码到工程里,发现凡是@override修饰的代码都会报错 这里有java历史的原因 5及以前不支持@override的注解,所以,此时,你最需要知道的是当前项目djk的编译版 ...
- IDEA maven项目下测试mybatis例子,使用mappper class或package引入mapper映射文件,总是报错Invalid bound statement(所有配置完全正确)
困扰几个小时,终于查到解决办法及原因(可以直接到最后看解决方案) 环境就是用IDEA搭建的maven项目,主要jar包引入配置如下 <dependencies> <dependenc ...
- tomcat 1)启动时不识别执行启动命令 2)启动报错 3)关闭不了,用myEclipse启动时显示jvm_bind,端口占用
- Eclipse使用Maven时,修改默认中央仓库后的配置报错找不到包的问题解决
一般在公司内容配置Maven时会在settings.xml文件下配置私服nexus地址,那么修改完之后在Eclipse中如果不指定用户目录级别的settings.xml文件会出现找不到包的问题. se ...
- pytest框架执行自动化测试时使用pycharm正常运行,使用cmd或Terminal报错:Hint: make sure your test modules/packages have valid Python names.
问题描述: 使用pytest框架做接口自动化测试时,在测试用例所在的.py文件下使用pycharm的run功能可以正常跑用例,使用cmd运行窗口或Terminal则报下图中的错误: Hint: mak ...
- iOS开发,用了ARC,引入非ARC的第三方,报错
ARC forbids explicit message sendof'dealloc' 在xcode中,打开“Build Setting”,找到“Objective-C Automatic Refe ...
随机推荐
- SOAR SQL进行优化和改写的自动化工具
前言 SQL优化是程序开发中经常遇到的问题,尤其是在程序规模不断扩大的时候.SQL的好坏不仅制约着程序的规模,影响着用户的体验,甚至威胁着信息的安全. 我们经常听到说哪家平台挂了,哪家网站被黑了,但我 ...
- asp.net core 同时添加Identity和Bearer认证
是这样的,网上介绍的Oauth认证一般都是授权服务器和资源服务器分开,但是我只想在一个网站中使用asp.net core自带的Identity认证给用户访问网站用,同时提供一些api接口通过Token ...
- DHCP的IP地址租约、释放
转自:https://blog.csdn.net/wangdk789/article/details/27052505 当DHCP客户端获取到一个IP地址后,并不代表可以永久使用这个地址,而是有一个使 ...
- BZOJ-1587|前缀和 预处理 dp||叶子合并leaves
叶子合并leaves Description 在一个美丽的秋天,丽丽每天都经过的花园小巷落满了树叶,她决定把树叶堆成K堆,小巷是笔直的 共有N片树叶(树叶排列也是笔直的),每片树叶都有一个重量值,并且 ...
- hdu2844 Coins -----多重背包+二进制优化
题目意思:给出你n种硬币的面额和数量,询问它能够组合成1~m元中的几种情况. 这题如果直接按照完全背包来写的话,会因为每一种硬币的数目1 ≤ Ci ≤ 1000而超时,所以这里需要运用二进制优化来解决 ...
- MVVM以及vue的双向绑定
原文:https://www.cnblogs.com/onepixel/p/6034307.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核 ...
- react native 项目使用 expo 二维码扫描失败
今天学习react native,需使用expo在移动端进行调试. npm start 运行项目后,使用expo扫描二维码,始终没有反应.于是决定采用这个方法: 连上手机打开usb调试后,按下‘a’, ...
- 解决ubuntu无法使用root用户启动Google Chrome浏览器
1.找到Chrome的路径 # whereis google-chrome google-chrome: /usr/bin/google-chrome /usr/share/man/man1/goog ...
- 用 jupyter notebook 打开 oui.txt 文件出现的问题及解决方案
问题背景:下载了2018 IEEE 最新的 oui.txt 文件.里面包含了 设备 MAC 地址的前六位对应的厂商.要做的工作是,将海量设备的 MAC 地址与 oui.txt 文件的信息比对,统计出 ...
- Kotlin 类和对象
类定义 Kotlin 类可以包含:构造函数和初始化代码块.函数.属性.内部类.对象声明. Kotlin 中使用关键字 class 声明类,后面紧跟类名: class Runoob { // 类名为 R ...