thickbox 四步实现弹出页面，或遮罩层

最新推荐文章于 2014-03-17 16:51:00 发布

op_xiaoyang

最新推荐文章于 2014-03-17 16:51:00 发布

阅读量1.6k

点赞数

分类专栏：遮罩层 jquery thickbox 弹出页文章标签： iframe stylesheet button class action servlet

本文链接：https://blog.csdn.net/op_xiaoyang/article/details/6753311

版权

jquery 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

弹出页

2 篇文章 0 订阅

订阅专栏

遮罩层

1 篇文章 0 订阅

订阅专栏

1.导入包：

---------thickbox的css显示样式

------------jquery，基于，先导入

------------拖动包，弹出页面可以拖动

-------------thickbox核心包

<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dragndrop.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js" charset="GBK"></script>

2.
说明。class触发js，这点类似validate框架。基于jquery的框架一般都是如此触发。另外，button按钮用alt，a标签用href来些你另外这个页面的地址，并且传递参数：

addDepart.jsp(这儿也可以是action)，后面一些都是参数。自己需要添加参数也可以直接添加。

<input type="button" class="thickbox" alt="addDepart.jsp?KeepThis=true&TB_iframe=true&height=330&width=650" title="新增部门" value="增加部门"/>

<th>
		<!-- 增加用户按钮
			<a id="a_link" href="department_queryAll?KeepThis=true&TB_iframe=true&height=330&width=650"  title="新增用户" class="thickbox" style="font-size:12px;">新增用户</a>
		-->
		<input type="button" value="新增用户" alt="department_queryAll?KeepThis=true&TB_iframe=true&height=330&width=650"  title="新增用户" class="thickbox"/>
		</th>

3.父页面需要nocache页面：

<jsp:include page="nocache.jsp"></jsp:include>

nocache.jsp如是：

<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0);
%>

另外，servlet，action添加，或者做完操作要跳回父页，必须往这个页面跳

<package name="userclient" extends="default">
		<action name="userclient_*" class="com.bdqn.action.UserClientAction" method="{1}">
			<result name="userredirect">/userredirect.html</result>
		</action>
	</package>

userredirect.html代码用来刷新父页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<script type="text/javascript">
		window.onload = function() {
			parent.tb_remove();
			parent.location.reload();
			//parent.location.href="userclient_queryPage?page=3";
		};
	</script>
  </head>
  <body>
   <br>
  </body>
</html>

效果：