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代码部分

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

1 <script type="text/javascript"> 2 3   function closeLayer() {   4     var index = parent.layer.getFrameIndex(window.name); // 获取父页面layer窗口索引 5     parent.layer.close(index)     // 直接关闭layer 6   } 7 8 </script>

 

 

②jsp页面部分:

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

 


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

 

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM