必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-07-16 12:12:11来源:IT技术作者:seo实验室小编阅读:85次「手机版」
 

thickbox

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>

效果:

注意!这种实现方式对一些操作可能会造成较复杂的过程。可以使用ajax来于优化,编码过程较复杂。另外,在修改页面上,可能要传递页面分页参数往后台。具体自己操作。

相关阅读

淘宝首页之导航条——弹出式悬浮菜单

昨天学习了布局,今天要来实现弹出式导航条。布局选的flex布局。关于弹出式悬浮菜单总结了下大概是以下几步:1.鼠标放到一级菜单上时

华为手机,解决每次打开游戏都弹出:请安装“华为游戏中心

出现这个提示,表明游戏是从华为应用市场下载的。 解决办法:卸载掉游戏,从其他应用商店重新安装,比如360助手,腾讯应用宝。

APP退出登录时,提示框是从中间弹出,还是底部弹起?

1. 问题引发下图左边是微信的退出界面,提示框是从底部弹起的。下图右边是QQ的退出界面,提示框是从中间弹出的。这时候,就引发了一个

通过TrackPopupMenu函数弹出菜单

如果你写一个win32程序,你想在某个条目上鼠标右键,弹出一个简单的菜单,该菜单就有一个选项。 那么,你不用费很大的力气去设计这个菜单

电脑关机时弹出窗口"内存不能为written不能关机"的

关机时弹出报错窗口,提示内存不能为written,现在很多刚升级完WIN7的机器关机报错是与&ldquo;issclipexec.exe&rdquo;这个进程有关,下

分享到:

栏目导航

推荐阅读

热门阅读