一个简单的弹出div,div里是一个表格
2014-02-26 15:26
381 查看
先看效果图:
默认时来时,产品信息是隐藏的;点击链接时显示,再点一下隐藏,或点X隐藏。
代码在jsp中写的,代码如下:
默认时来时,产品信息是隐藏的;点击链接时显示,再点一下隐藏,或点X隐藏。
代码在jsp中写的,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- "http://www.w3.org/TR/html4/loose.dtd" --> <html> <head> <base href="<%=basePath%>"> <title>产品详细</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> *{ margin:0; padding:0; font-size:12px;} .windows-container {position:absolute;background:#fff; border:1px solid #dfe7ed; width:300px; min-height:120px;} .windows-container h2 { position:relative; background:#378dd4; color:#fff; height:30px;line-height:30px; padding-left:5px;} .windows-container h2 a { position:absolute; right:3px; top:0px; text-decoration:none; color:#fff;} .windows-data {min-height: 20px;max-height: 100px;overflow: auto;} .datalist { border-collapse:collapse; width:100%;} .datalist th { background:#fdfdfd;} .datalist th, .datalist td { border:1px solid #f8f8f8; line-height:2;text-align: center;} </style> <script type="text/javascript" src="<%=path%>/resources/js/jquery-1.9.1.js"></script> <script type="text/javascript"> function productdetail(){ var os = $('#div').offset(); $('#productdetail').css({"left":os.left,"top":os.top}).toggle();//定位在os位置,并加入显示隐藏效果 } </script> </head> <body> <div id="hot_area" class="hot_area"><a href="javascript:productdetail(1);">共有6个产品</a></div> <div id="div" style="width:400px;height:200px;background:#54dab3;margin-left:10px;"></div> <div id="productdetail" class="windows-container" style="display: none;"> <h2> <span>产品详细</span><a href="javascript:productdetail();">×</a> </h2> <div class="windows-contents"> <table class="datalist"> <colgroup> <col width="80px" /> <col width="100px" /> <col width="*" /> </colgroup> <thead> <tr> <th>产品类型</th> <th>产品号码</th> <th>入网时间</th> </tr> </thead> </table> </div> <div class="windows-data"> <table class="datalist"> <colgroup> <col width="80px" /> <col width="100px" /> <col width="*" /> </colgroup> <tbody class="ccaa"> <tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr> <tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr><tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr><tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr><tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr> <tr> <td>宽带</td> <td>43050453</td> <td>20080128</td> </tr> </tbody> </table> </div> </div> </body> </html>
相关文章推荐
- 一个十分简单的div弹出层小例子
- 点击表格中的某个列,弹出一个div层
- 一个简单的div弹出层的小例子
- 一个简单的css+div布局实例,让你很明了的了解怎么布局!
- 一个简单的弹出对话框的shellcode(取自0day2一书)
- javascript实现一个简单的弹出窗
- 非常不错的弹出一个div的js代码
- 一个DIV+CSS代码布局的简单导航条
- 转载一个不错的js弹出div效果http://www.jb51.net/article/14885.htm
- 简单的封装一个HTML 弹出对话框的空间
- 这是一个dialog弹div的简单例子(1.1.9)
- 弹出一个注册div,后面背景变灰
- html一个简单的表格
- 写了一个简单好用的弹出层插件
- 如何用angularjs制作一个完整的表格之一__创建简单表格
- 一个简单但常用的表格样式--鼠标划过行变色--简洁实现
- 使用 UITableView 创建表格应用演练(1)——一个简单的表格应用
- java弹出一个简单的文本框
- 在js里边想把一个alter弹出框改为弹出一个表格样式的网页或对话框,请前辈指点!小弟先感谢了!
- ligerui一个dialog弹div的简单例子(1.1.9)