javaWeb中使用layer插件

本文主要介绍javaWeb中使用layer弹出层以及关闭弹出层

（一）准备工作：
在使用layer之前，首先得导入layer插件包，以及jquery插件（注意：jquery版本需大于1.8，否则不生效）
这里给大家这两个插件的下载地址以及layer的官方API 地址：

①layer插件：http://layer.layui.com/      

②jquery插件：http://www.jq22.com/jquery/jquery-1.9.1.zip

layer官方API 地址： https://www.layui.com/doc/modules/layer.html

 

大家自行下载插件之后，需要在页面引入js资源，如：

<script src="/third/jquery/jquery-1.9.1.js"></script>

<script src="/third/layer-v3.1.1/layer/layer.js"></script>

 

（二）开始使用：

现在准备工作完成了，我们现在开始使用layer！

（1）layer的父页面（user_list.jsp）

　①js代码部分

 <script type="text/javascript">
 
 　// 打开修改页面
 　function openEdit() {
 　　　　var index = layer.open({　　// 给当前layer弹出层赋值为index（在关闭弹窗时需要使用）
 　　　　　　type: 2,　　// 设置弹出层的类型（默认为0）
 　　　　　　area: ['90%', '90%'],　// 设置弹出层的大小
 　　　　　　fix: false,   // 不固定（默认true，即鼠标滚动时，弹出层是否固定在可视区域。）
 　　　　　　maxmin : true,　　// 最大最小化（该参数值对type : 1和type : 2有效。默认不显示）
　　　　　　 title: '修改用户信息填写',　　
 　　　　　　content: 'user_edit.jsp',　// 要跳转的页面地址（跟超链接是一样的形式，也可拼接赋值）
 　　　　　　end: function() {　　//   弹出层销毁后触发的回调（只要弹出层被销毁了，end都会执行）
 　　　　　　　　location.reload();　　  // 重新加载当前页面
 　　　　}
 　　});
  }
 
 </script>

 

②jsp页面部分：

1 <a href="javascript:void(0)" onclick="openEdit()" >修改用户信息</a>

 

 

 

（2）layer的子页面（user_edit.jsp）

①js代码部分：

这里需要注意，function的名称不能为submit（function submit(){}），否则layer关闭会无法生效，因为submit()方法为js定义好的表单提交方法，不能作为function方法名。

<script type="text/javascript">

　　function closeLayer() {　　
　　　　var index = parent.layer.getFrameIndex(window.name);  // 获取父页面layer窗口索引
　　　　parent.layer.close(index) 　　　　// 直接关闭layer
　　}

</script>

 

 

②jsp页面部分：

在修改完成提交表单时，需要执行closeLayer()函数

 

1 <input type="submit" value="提交" onclick="closeLayer()" />

 

完成上面的操作，就可以轻松实现layer插件的弹出层打开和关闭操作。