1.父页面添加引用
<script type="text/javascript" src="<web.path:path/>/js/jquery.js"></script>
<script type="text/javascript" src="<web.path:path/>/js/thickbox.js"></script>
<link rel="stylesheet" href="<web.path:path/>/resources/css/thickbox.css" type="text/css" media="screen" />
2.父页面添加如下按钮,引用thickbox打开子窗口
<input alt="<web.path:path/>/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent" title="Ban Another Users" class="thickbox" type="button" value="Ban Another"/>
3.子页面添加按钮或链接
<input id="banUser" type="button" value="Save"/>
<input id="closeBT" type="button" value="Cancel"/>
4.子页面添加相关jQuery和thickbox代码(因为父页面已经引用了jQuery和thickbox库,子页面不需要再引用)
<SCRIPT type="text/javascript">
$("#closeBT").click(function(){
tb_remove();
});
//click the save button to submit, close the current window and refresh the opener window
$("#banUser").click(function(){
//get the transfer params
var users = new Array();
$("input:checkbox").each(function(){
if(this.checked) {
users.push($(this).val());
}
});
$.ajax({
type:"POST",
url:"<web.path:path/>/bannedUserList!banUser",
data:"users="+users.join(","),
success:function(msg){
tb_remove(); //close the thickbox
var win = top.window;
try{
if(win){
win.location.reload(); //refresh the opener window
}
}catch(ex){}
}
});
});
</SCRIPT>
分享到:
相关推荐
### ThickBox关闭层自动刷新与页面数据提交冲突问题解析 #### 问题背景及现象 在进行Web开发过程中,经常会遇到需要使用弹出层的情况。ThickBox作为一个常用的弹出层插件,因其简单易用而受到许多开发者的青睐。...
8. **交互体验**:Thickbox提供了关闭按钮和键盘导航支持,用户可以通过点击关闭按钮或按Esc键来关闭模态窗口,增强了交互体验。 9. **响应式设计**:虽然原版Thickbox可能没有现成的响应式设计,但通过调整CSS样式...
这里,`class="thickbox"`告诉Thickbox处理这个链接,而`title`属性提供了弹出窗口的标题。Thickbox会自动处理缩略图点击后的大图显示,包括调整大小、添加阴影效果、以及处理关闭按钮等交互元素。 Thickbox还支持...
3. **Iframe集成**:如果需要在弹出框中嵌入外部网页或应用程序,Thickbox支持Iframe,可以将任何网页无缝地嵌入到弹出窗口中。 4. **Ajax支持**:通过Ajax技术,Thickbox能动态加载页面内容,无需页面刷新,提高了...
在某些应用场景中,用户可能希望在关闭ThickBox的同时刷新父页面,例如在进行了一些操作后需要更新页面数据。ThickBox可以被配置为在关闭时触发一个特定的JavaScript函数,例如刷新页面的`window.location.reload()`...
`success`回调函数中的`response`即为这个路径,然后我们通过`window.parent`来访问父窗口(即包含Thickbox调用的页面)的一个函数或变量,将路径回传回去。 在主页面,我们需要定义一个函数来接收Thickbox返回的值...
6. AJAX集成:Thickbox可以与AJAX技术结合,动态加载内容,使得用户在不刷新整个页面的情况下,更新弹出窗口中的信息。 学习Thickbox实例时,你可以关注以下几点: 1. HTML结构:了解如何正确地为图片、iframe或者...
`<iframe>`通过`postMessage`将下载状态或回传值发送出去,父窗口接收到消息后,进行相应的处理。 6. **安全考虑**:在使用`postMessage`时,需要注意验证消息的来源,防止XSS攻击。确保只有预期的`<iframe>`能发送...
- thickbox.css:这是Thickbox的样式文件,定义了弹出窗口的外观。 - thickbox.js:这是Thickbox的核心JavaScript文件,实现了弹出窗口的逻辑。 - tt.js:这是一个可选的文件,用于提供对 Thickbox 的文字提示支持。...
- **展示图片**:通过简单的HTML链接,ThickBox可以打开大图预览,支持幻灯片效果,提供关闭、前一张、后一张等操作。 - **嵌入内容**:不仅限于图片,ThickBox还可以加载任何内嵌在页面中的HTML元素,如iframe,...
标题中的“jQuery Thickbox3”是指一个基于jQuery的弹出窗口插件,Thickbox的第三个主要版本。这个插件允许网页开发者创建全屏、透明背景的弹出窗口,通常用于展示图片、视频、IFrame内容或者任何HTML内容。Thickbox...
3. **IFrame集成**:通过IFrame,Thickbox能够加载外部网页或者同一页面的其他部分,为用户提供无刷新的交互体验。 4. **自定义设置**:Thickbox支持各种自定义配置,如背景透明度、宽度、高度、关闭按钮等,开发者...
1. **图片预览**:ThickBox 可以将网页上的链接转化为带有淡入淡出效果的全屏预览窗口,用户可以在此预览图片,同时支持图片的前后导航。 2. **多媒体支持**:除了图片,ThickBox 还能处理其他类型的媒体内容,如...
ThickBox3.1是一款经典的JavaScript和CSS库,用于创建优雅的、响应式的弹出窗口效果。这个库在网页设计和开发中广泛使用,能够实现图片预览、iframe嵌入、多媒体播放等多种功能,为用户提供一种轻量级的增强用户体验...
Thickbox是一款流行的jQuery插件,它为网页提供了一种优雅的方式来展示图片、HTML内容、iframe和Ajax加载的页面,所有这些都在一个响应式的轻量级弹出窗口中。这个"thickbox简单实例"的压缩包文件包含了使用Thickbox...
例如,如果你想要一个图片在点击后以ThickBox的形式显示,你可以为`<a>`标签添加`rel="thickbox"`和`href`指向大图的URL。对于HTML内容,可以使用`TB_inline`或`TB_iframe`数据属性。 3. **参数设置**:ThickBox...
2. **过渡效果**:Thickbox 提供了平滑的淡入淡出和缩放效果,为打开和关闭弹出窗口增添了视觉吸引力。 3. **自动调整大小**:Thickbox 可以根据内容自动调整窗口大小,确保图片或其他媒体以最佳比例显示。 4. **...
3. **初始化Thickbox**:在页面加载完成后,调用jQuery的`.thickbox()`方法,初始化Thickbox功能。 4. **自定义配置**:如果需要,可以通过JavaScript设置Thickbox的参数,如宽度、高度、是否显示导航等。 5. **...
Thickbox允许通过JavaScript选项进行自定义,例如设置初始宽度和高度、过渡效果、关闭按钮行为等。这为开发者提供了很大的灵活性,可以根据项目需求调整Thickbox的行为。 6. **响应式设计**: 考虑到现代网页设计...
尽管ThickBox提供了便捷的使用方式,但在某些情况下,如AJAX加载页面后,动态生成的DOM元素可能无法自动绑定事件。此时,可以手动触发ThickBox事件,如: ```javascript $(document).ready(function(){ $('....