弹出层layer演示 以及在编写弹出层时遇到的错误
实现的功能:

首先第一步
在官方下载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><script type="text/javascript" src="<%=path %>/layer/layer.js"></script>
按钮弹出层代码:
<button id ="test" class="button border-main" type="button" onclick = "watch">预览</button>
js的方法:
function watch() {
layer.open({
type: 2,
title: '请假详情',
shadeClose: true,
shade: 0.8,
area: ['60%', '90%'], //宽高
ontent: 'leave_preview.jsp?leaveID= <%=leaveID%>' //iframe的url
});
}
假如你F12浏览器的控制台出现了一下的几种错误:
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文件有重名;
弹出层layer演示 以及在编写弹出层时遇到的错误的更多相关文章
- 小白在使用ISE编写verilog代码综合时犯得错误及我自己的解决办法
一:错误原因,顶层信号声明类别错误 错误前 更改后 二:综合时警告 更改前: 错误原因:调用子模块时 输出端口只能用wire类型变量进行映射 这是verilog语法规定的 tx_done在uart_t ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- web 前端常用组件【07】弹出层 Layer
web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...
- 牛逼的 弹出层 layer !!!
功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...
- 非常好用的弹出层 layer,常用功能demo,快速上手!
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用.老文档地址:http://layer.layui.com/api.html 已经停止维护 新文档地址:htt ...
- layui 弹出层layer中from初始化 ,并在btn中返回from.data
1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- layer弹出层 layer源码
下载源码:点击下载 ;!function(window, undefined){ "use strict"; var pathType = true, //是否采用自动获取绝对路径 ...
- layer,备受青睐的web弹层组件
//http://layer.layui.com/ 特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容' ...
随机推荐
- Spring MVC+Mybatis 多数据源配置及发现的几个问题
1.CustomerContextHolder 数据源管理类,负责管理当前的多个数据源,基于ThreadLocal实现,对每个线程设置不同的目标数据源 public class CustomerCon ...
- SPOJ 375 树链剖分 QTREE - Query on a tree
人生第一道树链剖分的题目,其实树链剖分并不是特别难. 思想就是把树剖成一些轻链和重链,轻链比较少可以直接修改,重链比较长,用线段树去维护. 貌似大家都是从这篇博客上学的. #include <c ...
- Python 基础(一)
本章内容 1.编译和解释型语言的区别 2.Python的解释器 3.pyc文件 4.运行环境 5.变量 6.数据类型 7.字符编码 8.三元运算 编译和解释型语言的区别 编译器是把源程序的每一条语句都 ...
- luogu3388 【模板】割点(割顶)
模板题 #include <iostream> #include <cstdio> using namespace std; struct Edge{ int too, nxt ...
- Java 程序动态替换 docx 模板中定制值的实现例子
项目系统中打印功能,导出 word 文档功能是挺常用的,本文介绍自定文档模板,程序实现模板内容中值替代的功能. 模板文件 template.docx 执行 main public static v ...
- webdriver高级应用- 无人工干预地自动上传附件
方法一:使用webdriver的send_keys方法上传文件,代码如下: #encoding=utf-8 from selenium import webdriver import unittest ...
- 记一次运行spark程序遇到的权限问题
设置回滚点在本地运行时正常,在集群时就报错,后来是发现ceshi这个目录其他用户没有写的权限,修改其他用户的权限就好了 hdfs dfs - /ceshi
- Hadoop全分布式模式安装
一.准备 1.准备至少三台linux服务器,并安装JDK 关闭防火墙如下 systemctl stop firewalld.service systemctl disable firewalld.se ...
- struts2和spring的两种整合方式
首先,来看看如何让Spring 来管理Action. 在struts.xml中加入 <constant name="struts.objectFactory" value=& ...
- 【转】深入JVM系列(一)之内存模型与内存分配
http://lovnet.iteye.com/blog/1825324 一.JVM内存区域划分 大多数 JVM 将内存区域划分为 Method Area(Non-Heap),Heap,Progr ...