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

好了，现在开始上代码

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML>

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

  </head>

  <body>

    	<input type="button" onclick="openFirstLayer()" value="点击"/>

    	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

		<script type="text/javascript" src="layer/layer.js"></script>

		<script type="text/javascript">

			function openFirstLayer(){

				/* layer.open({

				  type: 2,

				  title: ['你好','background-color:red,padding-left:5px'],

				  closeBtn: 1, //显示关闭按钮

				  shade: [0.3],

				  area: ['500px', '400px'],

				  offset: 'r', //右下角弹出,

				  move: false,

				  //anim: 4,

				  content: ['test.jsp', 'no'] //iframe的url，no代表不显示滚动条

				}); */

				layer.open({

				  type: 2,

				  title: ['历史进度展示','background-color:rgb(40, 144, 241);padding-left:5px;color:#fff'],

				  closeBtn: 1, //显示关闭按钮

				  shade: [0.3],

				  area: ['50%', '60%'],

				  offset: 'r', //右下角弹出,

				  move: false,

				  //anim: 4,

				  content: ['test.jsp', 'no'] //iframe的url，no代表不显示滚动条

				});

			}

		</script>

  </body>

</html>

test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML>

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'test.jsp' starting page</title>

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

  </head>

  <body>

    	<input type="button" onclick="openSecondLayer()" value="测试"/>

    	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

		<script type="text/javascript" src="layer/layer.js"></script>

    	<script type="text/javascript">

    		function openSecondLayer(){

    			/* parent.layer.open({

	 				type: 1,

	 				skin: 'layui-layer-rim', //加上边框

	 				area: ['420px', '240px'], //宽高

	 				content: 'html内容',

	 				cancel: function(index){

	 					if(confirm('确定要关闭么')){

	 					}

 						//return false;

 					}

   				}); */

    			parent.layer.open({

     				type: 2,

     				title: ['历史进度详情','background-color:rgb(40, 144, 241);padding-left:5px;color:#fff'],

     				//skin: 'layui-layer-rim', //加上边框

     				area: ['60%', '80%'], //宽高

     				content: ['test2.jsp','no'], //iframe的url，no代表不显示滚动条

     				cancel: function(index){

     					window.location.href = "test.jsp";

     					/* if(confirm('确定要关闭么')){

     					} */

    						//return false;

    				}

      			});

    		}

    	</script>

  </body>

</html>

test2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'test2.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

  </head>

  <body>

    This is my JSP page. <br>

  </body>

</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. INSTALL_FAILED_NO_MATCHING_ABIS

    在运行写好的cocos的demo时候,安装出现以下问题: 后来发现是因为自己用cygwin生成的x86的.so文件跟自己的魅族3机器CPU不适配!!! 参考:http://stackoverflow. ...

  2. MySQL聚簇索引

    聚簇索引并不是一种单独的索引类型,而是一种数据存储方式.具体的细节依赖于其实现方式,但innoddb 的聚簇索引实际上在同一个结构中保存了B-Tree索引和数据行. 当表有聚簇索引时,它的数据实际上存 ...

  3. Newtonsoft.Json使用

    SkuBean sb = (SkuBean)Newtonsoft.Json.JsonConvert.DeserializeObject(jobj.ToString(), typeof(SkuBean) ...

  4. 【python问题系列--4】ValueError: operands could not be broadcast together with shapes (100,3) (3,1)

    背景:dataMatrix是(100,3)的列表,labelMat是(1,100)的列表,weights是(3,1)的数组,属性如下代码所示: >>> import types> ...

  5. UIScrollView 加载多个view view还可以交换顺序（2）

    在上的代码中 UIview都在一个页面 要是每一个view对应一个页面 操作每一个view代码都在viewcontroller里面就会很乱,那么我们就将view重新做一下 创建想要的页面继承与view ...

  6. docker中管理数据

    到目前我们介绍了一些Docker的基础概念, 知道了如何使用Docker的image, 也知道了如何在多个container间通过网络通讯. 在这章里我们将介绍如何在docker的container内 ...

  7. drupal7 上传文件中文乱码

    drupal7自带有file模块,可以上传文件. 但是存在问题:如果上传的文件名称是中文,存储在文件下面的文件名称是乱码的,解决办法如下:参考出处 includes/file.inc中,修改两处代码, ...

  8. Cenots安装openvpn、pam_mysql进行用户认证和流量控制

    一.安装Centos6.5 二.修改YUM仓库 1. 默认仓库不能访问部分软件包,因此我们需要修改YUM仓库 cd /etc/yum.repos.d #备份 mv ./CentOS-Base.repo ...

  9. C#项目转php工作记录

    1.Visual Studio Ultimate 2012 静态激活密钥 RBCXF-CVBGR-382MK-DFHJ4-C69G8 http://blog.csdn.net/jpzy520/arti ...

  10. 把excel数据导入mysql中

    适用:每列的数据都不是以逗号分隔. 1.在mysql建表,全部字段与表头相同且顺序一致 2.将excel另存为csv格式,用Editplus把CSV文件另存为UTF-8编码格式 3.执行load da ...