最近因为项目要求做了一个layer弹出层demo，先看效果图

好了，现在开始上代码

index.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML>
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'index.jsp' starting page</title>
  13. 	<!--
  14. 	<link rel="stylesheet" type="text/css" href="styles.css">
  15. 	-->
  16.   </head>
  17.  
  18.   <body>
  19.     	<input type="button" onclick="openFirstLayer()" value="点击"/>
  20.  
  21.     	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  22. 		<script type="text/javascript" src="layer/layer.js"></script>
  23. 		<script type="text/javascript">
  24. 			function openFirstLayer(){
  25. 				/* layer.open({
  26. 				  type: 2,
  27. 				  title: ['你好','background-color:red,padding-left:5px'],
  28. 				  closeBtn: 1, //显示关闭按钮
  29. 				  shade: [0.3],
  30. 				  area: ['500px', '400px'],
  31. 				  offset: 'r', //右下角弹出,
  32. 				  move: false,
  33. 				  //anim: 4,
  34. 				  content: ['test.jsp', 'no'] //iframe的url，no代表不显示滚动条
  35. 				}); */
  36. 				layer.open({
  37. 				  type: 2,
  38. 				  title: ['历史进度展示','background-color:rgb(40, 144, 241);padding-left:5px;color:#fff'],
  39. 				  closeBtn: 1, //显示关闭按钮
  40. 				  shade: [0.3],
  41. 				  area: ['50%', '60%'],
  42. 				  offset: 'r', //右下角弹出,
  43. 				  move: false,
  44. 				  //anim: 4,
  45. 				  content: ['test.jsp', 'no'] //iframe的url，no代表不显示滚动条
  46. 				});
  47. 			}
  48. 		</script>
  49.   </body>
  50. </html>

test.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML>
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>My JSP 'test.jsp' starting page</title>
  12. 	<!--
  13. 	<link rel="stylesheet" type="text/css" href="styles.css">
  14. 	-->
  15.   </head>
  16.  
  17.   <body>
  18.     	<input type="button" onclick="openSecondLayer()" value="测试"/>
  19.  
  20.     	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  21. 		<script type="text/javascript" src="layer/layer.js"></script>
  22.     	<script type="text/javascript">
  23.     		function openSecondLayer(){
  24.     			/* parent.layer.open({
  25. 	 				type: 1,
  26. 	 				skin: 'layui-layer-rim', //加上边框
  27. 	 				area: ['420px', '240px'], //宽高
  28. 	 				content: 'html内容',
  29. 	 				cancel: function(index){
  30. 	 					if(confirm('确定要关闭么')){
  31.  
  32. 	 					}
  33.  						//return false;
  34.  					}
  35.    				}); */
  36.     			parent.layer.open({
  37.      				type: 2,
  38.      				title: ['历史进度详情','background-color:rgb(40, 144, 241);padding-left:5px;color:#fff'],
  39.      				//skin: 'layui-layer-rim', //加上边框
  40.      				area: ['60%', '80%'], //宽高
  41.      				content: ['test2.jsp','no'], //iframe的url，no代表不显示滚动条
  42.      				cancel: function(index){
  43.      					window.location.href = "test.jsp";
  44.      					/* if(confirm('确定要关闭么')){
  45.  
  46.      					} */
  47.     						//return false;
  48.     				}
  49.       			});
  50.     		}
  51.     	</script>
  52.   </body>
  53. </html>

test2.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'test2.jsp' starting page</title>
  13.  
  14. 	<meta http-equiv="pragma" content="no-cache">
  15. 	<meta http-equiv="cache-control" content="no-cache">
  16. 	<meta http-equiv="expires" content="0">
  17. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. 	<meta http-equiv="description" content="This is my page">
  19. 	<!--
  20. 	<link rel="stylesheet" type="text/css" href="styles.css">
  21. 	-->
  22.  
  23.   </head>
  24.  
  25.   <body>
  26.     This is my JSP page. <br>
  27.   </body>
  28. </html>

　　只是一个简单demo展示，剩下的拓展需要自己再去深入挖掘

layer弹出层的更多相关文章

  1. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  2. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  3. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

  4. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  5. layer 弹出层 不居中

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  6. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  7. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  8. 常用的layer弹出层

    本文来自 松耦合 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/dunegao/article/details/78978448?utm_source=copy 常用 ...

  9. layer弹出层右上角的关闭按钮怎么没有显示

    问题描述:layer弹出层右上角的关闭按钮怎么没有显示,但鼠标移上去又可以点击 解决方式: 这是因为样式中需要一个图标,你的项目中缺少.解决如下:1.下载图标:http://www-x-zi-han- ...

随机推荐

  1. 对象比较中 "相等性"和"同一性" 生动地解释

    对象们都住在不同的房间里,每个房间只能住一个对象.对象们都被锁在房间里,永远没有办法搬家(至少从我们讨论的角度来说,这个说法是正确的).所以如果你知道了一个对象的房间号,就能找到对应的对象. 现在假如 ...

  2. 1bpp像素遍历(找了半天，感谢github)

    /// <summary> /// 获取比例 /// </summary> /// <param name="rect"></param& ...

  3. LYNC2013介绍和基础架构准备角色

    LYNC2013部署系列PART1:LYNC2013介绍和基础架构准备 前言:LYNC 2013发布已经很久了,本人一直在进行相关的学习和测试,在有限的资源条件下,把能够模拟出来的角色进行了安装部署, ...

  4. eclipse和tomcat整合之后每次发布server.xml被修改（转）

    eclipse每次发布,server.xml和context.xml总是被还原 直接找到eclispse工程下的server工程,把里面的相应的server.xml和context.xml修改了即可, ...

  5. List泛型集合常用方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace List ...

  6. javascript performence

    1.将脚本放在底部 javascript是阻塞式的加载,如果先加载脚本,后面的dom都没有办法进行渲染,页面会是一片空白: 采用无阻塞下载javascript a.使用<script>标签 ...

  7. netsh命令之ip设置

    批处理.VBS实现自动设置IP.默认网关.DNS.WINS.IE代理的代码,需要的朋友可以参考下 因为公司有同事负责大连.沈阳两个城市,经常在两地来回走动,到每个城市后,都要自己手动更改相应的网络配置 ...

  8. Android中调用系统的相机和图库获取图片

    //--------我的主布局文件------很简单---------------------------------<LinearLayout xmlns:android="http ...

  9. Google 怎么搜索

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:崔凯 链接:http://www.zhihu.com/question/20161362/answer/14180620 ...

  10. 说说final关键字(好像有干货)

    在java开发过程中,final是大家常用的关键字,无非就是用来修饰类,方法和变量,来表名类不能被继承,方法不会被覆盖,变量不能被改变,悄悄的说一句,private方法也隐式的final.通过一段时间 ...