layer弹出层
最近因为项目要求做了一个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弹出层的更多相关文章
- layer弹出层不居中解决方案
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- Layer弹出层销毁问题
Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...
- layer 弹出层 回调函数调用 弹出层页面 函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
- layer 弹出层 不居中
layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>
- layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- 常用的layer弹出层
本文来自 松耦合 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/dunegao/article/details/78978448?utm_source=copy 常用 ...
- layer弹出层右上角的关闭按钮怎么没有显示
问题描述:layer弹出层右上角的关闭按钮怎么没有显示,但鼠标移上去又可以点击 解决方式: 这是因为样式中需要一个图标,你的项目中缺少.解决如下:1.下载图标:http://www-x-zi-han- ...
随机推荐
- Windows10 Apache2.4 PHP7 MySQL 5.7安装教程
最近细细的折腾了win10下PHP环境的安装过程,每次安装总是有小问题,现在总结一下.安装之前需要注意,下载的安装包(除MySQL)外必须统一是64位或者统一时32位. 一. MySQL5.7的安装 ...
- 应用 Valgrind 发现 Linux 程序的内存问题(转)
Valgrind 概述 体系结构 Valgrind 是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个 ...
- python 列表、字典的方法
# 列表最后新增元素 li = [11, 22, 33] print(li) li.append(44) # 对原列表最后增加一个元素 print(li) 执行如下: [11, 22, 33][11, ...
- 重拾Ruby—新的征程
作家格拉德威尔在<异类>一书中指出: “人们眼中的天才之所以卓越非凡,并非天资超人一等,而是付出了持续不断的努力.1万小时的锤炼是任何人从平凡变成超凡的必要条件.“ 他将此称为“一万小时定 ...
- 安装mcrouter
下载准备: mcrouter 下载地址 : https://github.com/facebook/mcrouter gflags 下载地址:http://download.csdn.net/deta ...
- ECOS 系统查找商品详情图片存入mysql情况。
SELECT g.goods_id, g.bn,g.name,b.brand_name,g.price,g.mktprice,c.cat_name into outfile '/tmp/xxx.xls ...
- 2015 Multi-University Training Contest 10
1001 CRB and Apple 1002 CRB and Candies 1003 CRB and Farm 1004 CRB and Graph 1005 CRB and His Birthd ...
- 数据结构 B树 B+树 B*树 LSM-树
从B树.B+树.B*树谈到R 树 http://blog.csdn.net/v_JULY_v/article/details/6530142/ B-tree.B+tree和LSM-tree http: ...
- RFC3489 STUN之客户端所处环境探测流程与部分属性含义说明
1 STUN客户端所处环境探测流程 1.1 流程图 1.2 流程图中Binding请求类型说明 类型1:Binding请求消息中不设置CHANGE-REQUEST,或若设置其相应更改IP与端口标志位都 ...
- mac mysql下载
mysql下载地址:http://dev.mysql.com/downloads/mysql/,不需要账号的 mysql创建数据库,默认字符集是latin1,可以指定字符集. mac删除mysql c ...