实现的功能:

首先第一步

  在官方下载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. Chromium Embedded Framework

    关于CEF 近期由于工作需要开始研究了Google的Chromium Embedded Framework(CEF),这是一个基于Google Chromium开源代码的项目,使用CEF可以很方便的在 ...

  2. 新线程 handler

    class CalculateThread extends Thread { private Handler handler; @Override public void run() { super. ...

  3. PHP中文网 学习阶段规划

    1.第一阶段: 前端基础 前端基础课程大纲 教学内容 教学重点 1.HTML5 HTML简介.HTML标签详解.字符编码的奥秘.Html5新特性与常用标签 2.CSS3 CSS简介.CSS的引入方式. ...

  4. iframe内容刷新

    经常有嵌套的iframe的内容无法及时刷新,需要手动刷新,这时候就需要获取iframe,然后调用对象的reload, document.getElementById(iframe的id).conten ...

  5. nginx的常用负载均衡算法,分别是

    随机分配,hash一致性分配,最小连接数分配,主备分配 随机,轮训,一致性哈希,主备,https://blog.csdn.net/liu88010988/article/details/5154741 ...

  6. Selenium WebDriver-模拟鼠标双击某个元素

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...

  7. 浅析win32 Win64 x86 x64 区别 及Eclipse启动报Java was started but returned exit code=13 错误

    win32.x86_64是64位 X86就是  32位系统 X64 就是64位系统 最好记得方法就是带有64的就是64位,其余都是32位 为什么要讲这个呢? 如果是绿色版本的eclipse,在打开ec ...

  8. SDOJ 3742 黑白图

    [描述] 一个 n 个点 m 条边构成的无向带权图.由一些黑点与白点构成 树现在每个白点都要与他距离最近的黑点通过最短路连接(如果有很多个,可以选 取其中任意一个),我们想要使得花费的代价最小.请问这 ...

  9. 解决Failed with error: unable to access 'https://git.coding.net/chenmi1234/lianpos.git/': Couldn't resolve host 'git.coding.net'

    代码改变世界 github push 出现问题 Failed with error: unable to access 'https://git.coding.net/chenmi1234/lianp ...

  10. Welcome-to-Swift-08枚举 (Enumerations)

    枚举为一系相关联的值定义了一个公共的组类型.同时能够让你在编程的时候在类型安全的情况下去使用这些值. 如果你对C语言很熟悉,你肯定知道在C语言中枚举类型就是一系列具有被指定有关联名称的的整数值.但在S ...