div 弹出层 展示 例子


<%@ page language="java"  pageEncoding="utf-8"%>
<%@taglib prefix="ww" uri="webwork" %>
<%
	String path = request.getContextPath();
%>
<html>
  <head>
    <link href="<%=path%>/framework/resources/sinks/default/css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<%=path%>/framework/resources/common/js/querytable.js"></script>
    <script type="text/javascript" src="<%=path%>/framework/resources/common/js/util/jquery.js"></script>
	<script type="text/javascript">
	  $(document).ready(function() {
		$("a[name='showmsg']").click(function(e){
			var x = e.clientX+20;
			var y = e.clientY+20;
			$("#showDiv").css({"zIndex":90000,"position":"absolute","top":y,"left":x,"display":""});
			});
		});
	  </script>
	<script type="text/javascript">
		function divTest(id)
		{
			//load
			document.getElementById('showDiv').innerHTML='';
			$('#showDiv').ajaxStart(function(){$("#showDiv").html("正在加载请稍后...")});
			$("#showDiv").load('<%=path %>/test/testDiv.action',{'args':id},callback);
			function callback(date){
				//alert(date)
				}
		}
		// close
			function closeDiv(){

				$("#showDiv").html("");
				$("#showDiv").css({display:"none"});
			}
	</script>
  </head>

  <body>
    <form action="#" method="post" id="frm" name="frm">
    <a href="#" name="showmsg" onclick="divTest('21')">demo</a>
    <div id="showDiv" style="width:20%;display:none;background:#DBEAF5;border-style:outset; border-width:1px;"></div>
    </form>
  </body>
</html>

/**
	 * @author . 程仁银
	 * @email  . [email protected]
	 * @createTime .Jul 27, 2010 10:09:01 AM
	 * @parameters . args by id
	 * @description .to test div show type
	 */
	public String testDiv()
	{
		String id = this.getRequest().getParameter("args");
		try {
			this.getResponse().setCharacterEncoding("utf-8");
			PrintWriter out = getResponse().getWriter();
			out.print("<table style=\"width:100%\">");
			if(this.testService.getById(MeetMenu.class,Long.parseLong(id)) != null)
			{
				MeetMenu mm = this.testService.getById(MeetMenu.class,Long.parseLong(id));
				out.print("<tr><td style=\"width:20%\">col1:</td><td style=\"width:80%\">" + mm.getMenuName()+ "</td></tr>");
				out.print("<tr><td>col2:</td><td>" +mm.getMenuText()+ "</td></tr>");
			}else
			{
				out.print("<tr><td>数据读取出错!请重新再试</td></tr>");
			}

			out.print("<tr><td><input type=\"button\" name=\"but\" value=\"关闭\" id=\"but\" onclick=\"closeDiv()\" />&nbsp;&nbsp;</td></tr>");
			out.print("</table>");
			out.flush();
			out.close();
		} catch (NumberFormatException e) {
			e.printStackTrace();
		} catch (BOException e) {
			e.printStackTrace();
		}catch (Exception e) {
			// TODO: handle exception
		}
		return "";
	}

你可能感兴趣的:(java,html,jquery,css,Webwork)