点击弹出div

1.controller

	@RequestMapping("getUser")
	public String getUser(Map<String, Object> map){
		List<User> lst = testService.getlst();
		map.put("list", lst);
		return "userLst";
	}
	
	@RequestMapping("getUserById")
	@ResponseBody
	public String getUserById(@RequestParam String id){
		User u = new User();
		u.setUsername("jack");
		u.setPassword("123");
		JSONObject j= JSONObject.fromObject(u);
		return j.toString();
	}

2.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>listView</title>
<style type="text/css">
.pop {
	position: absolute;
	left: 40%;
	top: 40%;
	width: 300px;
	height: 140px;
	background: #eee;
	border: 1px solid #ccc
}

.pop_head {
	position: relative;
	height: 20px;
	background: #ccc
}

.pop_head a {
	position: absolute;
	right: 8px;
	line-height: 20px;
	color: #000;
	text-decoration: none
}

.pop_head a:hover {
	color: #f60;
	text-decoration: none
}

.pop_body {
	padding: 8px
}
</style>

</head>
<body>
	<c:forEach items="${list}" var="user" varStatus="s">
		${user.name}
		<a href="javascript:void(0);" onclick="show('${user.id}')">详细</a>
		<br>
	</c:forEach>

	<!--首先设置一个层:-->
	<div id="pop" class="pop" style="display: none">
		<div class="pop_head">
			<a href="javascript:void(0);" onclick="hide()">关闭</a>
		</div>
		<div class="pop_body" style="height: 100px; overflow: auto"></div>
	</div>

	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		var EX = {
			addEvent : function(k, v) {
				var me = this;
				if (me.addEventListener)
					me.addEventListener(k, v, false);
				else if (me.attachEvent)
					me.attachEvent("on" + k, v);
				else
					me["on" + k] = v;
			},
			removeEvent : function(k, v) {
				var me = this;
				if (me.removeEventListener)
					me.removeEventListener(k, v, false);
				else if (me.detachEvent)
					me.detachEvent("on" + k, v);
				else
					me["on" + k] = null;
			},
			stop : function(evt) {
				evt = evt || window.event;
				evt.stopPropagation ? evt.stopPropagation()
						: evt.cancelBubble = true;
			}
		};

		$('#pop').click = EX.stop;

		var myDiv;

		function show(id) {
			syncAjax('getUserById.html', {
				'id' : id
			}, function(data) {
				var obj = $.parseJSON(data);
				myDiv = $('<div>' + obj.username + '</div><div>' + obj.password
						+ '</div>');
				var o = $('#pop');
				o.show();
				$(".pop_body").html("");
				$(".pop_body").append(myDiv);
			});

			setTimeout(function() {
				EX.addEvent.call(document, 'click', hide);
			});
		}

		function hide() {
			var o = document.getElementById('pop');
			o.style.display = "none";
			EX.removeEvent.call(document, 'click', hide);
		}

		function syncAjax(myUrl, myData, sufn) {
			$.ajax({
				type : "post",
				url : myUrl,
				data : myData,
				dateType : "json",
				success : function(callbackdata) {
					sufn(callbackdata);
				},
				error : function(data, status, e) {
					alert("error");
				}
			});
		}
	</script>
</body>
</html>


你可能感兴趣的:(jquery)