弹出层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('内容' ...
随机推荐
- 稀疏表(ST / Sparse Table)
RMQ问题: 给定一个序列,每次询问一个区间最小值 / 最大值. 没有修改. //拿区间最大值来举例. memset(ans, -INF, sizeof(ans)); for (int i = 1; ...
- Python中的并发
目录 Python并发 并发三种层次 协程 生成者消费者 新关键字 网络io 线/进程 例子 线程池 进程通信 并发池 future对象 executor对象 参考 Python并发 并发三种层次 个 ...
- 下载linaro android 4.4.2 for panda4460
$ export MANIFEST_REPO=git://android.git.linaro.org/platform/manifest.git$ export MANIFEST_BRANCH=li ...
- day06 面向对象编程
面向对象: 面向对象: 世界万物,皆可分类 世界万物,皆为对象 只要是对象,就肯定属于某种品类 只要是对象,就肯定有属性 特性: 多态: 一个统一的接口,多种实现 例如: 一个 ...
- SpringCloudLearning
http://blog.didispace.com/Spring-Boot%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/ https://github.com/forezp ...
- Selenium WebDriver-actionchain模拟鼠标右键操作
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- 在Asp.net MVC中应该怎样使用Spring.Net
简单工厂 专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类或接口.简单工厂模式又称为静态工厂方法(Static Factory Method)模式,属于类的创建型模式,通常根据一 ...
- IDA动态调试技术及Dump内存
IDA动态调试技术及Dump内存 来源 https://blog.csdn.net/u010019468/article/details/78491815 最近研究SO文件调试和dump内存时,为了完 ...
- 学习 WebService 第五步:在Local创建测试用WebService(WSDL)
[准备] Eclipse+Tomcat7(Tomcat端口修改为不冲突的值) axis2 1.7.7 jar包(没有来这里下载:http://www.apache.org/dyn/closer.lua ...
- 学习 WebService 第三步:一个简单的实例(RAD+WAS 8.5开发SOAP项目)
[开发环境] Web Service 服务器端开发工具:RAD(Eclipse内核) Web Service 服务器:IBM WebSphere v8.5 REST/SOAP:SOAP(JAX-WS/ ...