实现的功能:

首先第一步

  在官方下载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演示 以及在编写弹出层时遇到的错误的更多相关文章

  1. 小白在使用ISE编写verilog代码综合时犯得错误及我自己的解决办法

    一:错误原因,顶层信号声明类别错误 错误前 更改后 二:综合时警告 更改前: 错误原因:调用子模块时 输出端口只能用wire类型变量进行映射 这是verilog语法规定的 tx_done在uart_t ...

  2. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  3. web 前端常用组件【07】弹出层 Layer

    web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...

  4. 牛逼的 弹出层 layer !!!

    功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...

  5. 非常好用的弹出层 layer,常用功能demo,快速上手!

    功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用.老文档地址:http://layer.layui.com/api.html 已经停止维护 新文档地址:htt ...

  6. layui 弹出层layer中from初始化 ,并在btn中返回from.data

    1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...

  7. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  8. layer弹出层 layer源码

    下载源码:点击下载 ;!function(window, undefined){ "use strict"; var pathType = true, //是否采用自动获取绝对路径 ...

  9. layer,备受青睐的web弹层组件

    //http://layer.layui.com/ 特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容' ...

随机推荐

  1. Cheese Aizu - 0558 (搜索题)

    Time limit8000 ms Memory limit131072 kB チーズ () 問題 今年も JOI 町のチーズ工場がチーズの生産を始め,ねずみが巣から顔を出した.JOI 町は東西南北に ...

  2. 重新造轮子之静态链接1(Static linking)

    最近学习计算机病毒学的过程中,又讲到了静态链接的问题,联想到了之前保健哥在信息安全的课堂上向我们展示了一个没有main()函数的C程序到底应该如何编写.个人觉得这个小实验对于加深静态链接的过程的理解也 ...

  3. 【12】Firefox 快捷键大全及更改和定制快捷键的方法

    [12]Firefox 快捷键大全及更改和定制快捷键的方法 答: Firefox 本身没有提供更改和定制快捷键的选项,若有需要,请安装扩展 Keyconfig 来解决.  安装地址如下: Keycon ...

  4. webdriver高级应用- 精确比较页面截图图片

    判断两张图是否完全一致,如果存在任何不一致,会认为图片不匹配,代码如下: #encoding=utf-8 from selenium import webdriver import unittest, ...

  5. [python学习篇][廖雪峰][1]高级特性--创建生成器 方法2 yield

    def fib(max): n, a, b = 0, 0, 1 while n < max: print b a, b = b, a + b n = n + 1 将print b 改成yield ...

  6. 九度oj 1003

    前几天开刷九度oj,准备把做的题都放上,先放1003 题目1003:A+B             时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:16923 解决:7029 题目描述: 给 ...

  7. 设计模式(十六)迭代器模式 Iterator

    什么时候需要用到迭代器模式? 有许多中方法,可以把对象堆起来放进一个集合(可以是数组.堆栈.列表.哈希表,等等). 每一种类型的集合,都有各自适用的时机.但是某个时间段,客户端可能希望去遍历这个集合. ...

  8. 设计模式(五)原型模式 Prototype

    原型模式: 原型模式,是指基于一个已经给定的对象,通过拷贝的方式,创建一个新的对象,这个给定对象,就是“原型”. 在 Java 中,原型模式体现为 Object 的 clone() 方法. 所有类都可 ...

  9. 【bzoj1907】树的路径覆盖 树形dp

    题目描述 输入 输出 样例输入 1 7 1 2 2 3 2 4 4 6 5 6 6 7 样例输出 3 题解 树形dp 设f[x]表示以x为根的子树完成路径覆盖,且x为某条路径的一端(可以向上延伸)的最 ...

  10. 校赛——1096Is The Same?(KMP或字符串的最小、大表示法)

    1096: Is The Same? Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 26  Solved: 8[Submit][Status][Web B ...