首页 > 其他 > 详细

弹出层layer 完整步骤以及在编写弹出层时遇到的错误

时间:2019-05-16 23:42:48      阅读:222      评论:0      收藏:0      [点我收藏+]

实现的功能:

技术分享图片

首先第一步

  在官方下载layer的文件。layUI官网:http://layer.layui.com/     http://layer.layui.com/

  layer文件的下载步骤如下:

技术分享图片

 

技术分享图片

然后将完整的layer文件复制在你当前的项目。如下:

技术分享图片

引入jquery.js和layer.js,注意:jQuery.js必须在layer.js前面而且jquery.js必须是1.8版本或者以上的

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>      //我的jquery.js不是项目内的
<script type="text/javascript" src="<%=path %>/layer/layer.js"></script>

假如你的浏览器的控制台出现:

layer.js:2 Uncaught TypeError: i is not a function
at Object.o.run (layer.js:2)
at layer.js:2
at layer.js:2
at layer.js:2

 

leaveExamine_list.jsp:92 Uncaught TypeError: layer.open is not a function
at Eject (XXX.jsp:92)
at HTMLButtonElement.onclick

 

Uncaught SyntaxError: Invalid or unexpected token

 

XXX.jsp:65 Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (leaveExamine_list.jsp:65)
onclick @ leaveExamine_list.jsp:65

说明内的jquery.js不是1.8版本或者以上的,或者是在layer.js的后面,或者是你触发按钮的js方法和layer的js文件或者css文件有重名;

按钮弹出层代码:

<button id ="test" class="button border-main" type="button" onclick = "Eject()">预览</button>

js的方法:

 1 function Eject() {
 2         layer.open({
 3         type: 2,
 4          title: ‘请假详情‘,
 5         shadeClose: true,
 6         shade: 0.8,
 7         area: [‘60%‘, ‘90%‘],   //宽高
 8         ontent: ‘leave_preview1.jsp?leaveID=  <%=leaveID%>‘ //iframe的url
 9         }); 
10 }

 

 

弹出层layer 完整步骤以及在编写弹出层时遇到的错误

原文:https://www.cnblogs.com/chuangqi/p/10878788.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!