JSP页面layui弹出层失效问题

前两天写了一个个人网站，使用了layui的组件，其中有一些坑和大家说一下。

1.导入的问题

首先layui的导入，必须jqery在前，layui.js在后，自己编写的js文件应该在最后，否则会导致弹出层失效的问题.
建议将自己编写的js文件myStyle.js放入整个页面的最下方，也就是body的上面，因为有时候自己写的js文件需要获取页面的元素来监听，可能导致事件已经启动，但页面未加载完，元素为空的情况，导致js效果等不出现的问题。
jQuery>layui.js>common.js>myStyle.js
最好的方式就是将script文件全部放入页面的最后。

2.myScript.js引入layui的问题

我这里使用layui组件写了一个按钮，并设置它的点击事件为οnclick="welcome()"

而我在js中的代码出现了问题，一直弹不出layer的消息弹窗。

这是我的运行结果：

发现layer对象是存在的，但是方法却没有得到执行，在重新思考过后换了一个方式编写，于是便解决了问题。

对于layui组件的引用，最好采用模块中引用方法的方式，而不是在方法中引用模块。

3.浏览器缓存导致弹出层失效的问题

<!--前端代码 -->
<div class="main layui-anim-fadeout"><div class="main-img1"><img src="./static/img/web-logo.png" alt="图片正在加载"></div><div class="main-img2"><img src="./static/img/story-logo.png" alt="图片正在加载"></div><div class="welcome_btn animated bounce"><div class="layui-btn layui-btn-lg layui-btn-radius " onclick="welcome()">WELCOME!</div></div><div class="introduce"><a href="#introduce" id="introduce1"></a></div></div>

//js部分代码
function welcome() {layui.use('layer', function () {var layer = layui.layer;layer.msg("感谢有你的陪伴!  嘿嘿>=<", {offset: '500px'});});
}

我把js改成

function welcome() {layui.use('layer', function () {var layer = layui.layer;layer.msg("1");});
}

发现浏览器还是弹出感谢有你的陪伴! 嘿嘿>=< 字样，删除了js代码后还是会有这个弹窗，在多次尝试后，发现浏览器会有缓存，在我关闭浏览器后才弹出1的弹窗。

所以关闭浏览器或者更换浏览器可以解决上述问题。

JSP页面layui弹出层失效问题相关推荐

layui弹出层html页面,layui弹出层
利用layui框架layer部分执行的弹出层,这样比起普通alert的弹出层更美观首先,写一个按钮点击试试 js部分 $(document).ready(function () { $('.btn ...
layui弹出层弹出另一个页面
layer.open({type: 2,skin: 'layui-layer-demo', //样式类名title: '标题',closeBtn: 0, //不显示关闭按钮anim: 2,area: ...
layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口· layer.open弹出iframe窗口 [1]该功能为案例,弹出iframe窗口显示上传数据由于layui的弹出层每次执行layer. ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
layui弹出层中添加下拉框
layui弹出层中添加下拉框实习不到两个月,踩到的坑使用layui写了一个项目,负责其中的一小块,其中有一个页面需要在弹出层中写一个下拉框代码如下: <div class="la ...
html弹出层获取填充数据,layui 弹出层回调获取弹出层数据的例子
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], of ...
Layui弹出层取值
Layui弹出层取值 1.首先在父页面定义要传过去的值 table.on('tool(demo)', function (obj) {//obj为当前行对象var data = obj.data;js ...
layui弹出层使用方法总结
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 functio ...
layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

JSP页面layui弹出层失效问题

1.导入的问题

2.myScript.js引入layui的问题

3.浏览器缓存导致弹出层失效的问题

JSP页面layui弹出层失效问题相关推荐

最新文章

热门文章