layer弹窗自定义及向父页动态传参

最新推荐文章于 2025-04-18 18:13:08 发布

原创

最新推荐文章于 2025-04-18 18:13:08 发布

· 1.9w 阅读

5 ·

版权

文章标签：

#Java Web #Java插件 #layer #动态传参 #sweetAlert

这篇博客介绍了如何在Java Web项目中利用layer插件创建弹窗，并实现向父页面动态传递参数。作者首先分享了layer插件的下载与基本使用，通过一个Demo展示弹窗的创建过程。在比较了sweetAlert的功能局限性后，选择了layer来完成更复杂的自定义内容加载需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer弹窗自定义及向父页动态传参

做项目中需要用到弹出框在父页面内弹出对话框供用户选择信息，然后将用户选择传回父页面的需求。查找网上资料，发现layer弹窗插件是个好东西，能完美的实现本人需要的功能。以下写一个小Demo记录下来，以便以后查找。

首先从官网下载js插件包。

layer官网：http://layer.layui.com/

下载后的包结构如下：

页面test.jsp部分代码如下：

<%@ page contentType="text/html; charset=utf-8" language="java"
	import="java.sql.*" errorPage=""%>
<%
    String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量    
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。    
	pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
<script src="<%=basePath%>static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/jquery.form.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/sweet-alert.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/layer/layer.js"></script>
<link rel="stylesheet" type="text/css" href="

最低0.47元/天解锁文章