1:首先在http://jquery.com/demo/thickbox/中下载thickbox 和 JQuery
在jsp页面中加入
- <input alt="#TB_inline?height=300&
-
width=400&
- inlineId=myOnPageContent"
- title=
-
"add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<input alt="#TB_inline?height=300&
width=400&
inlineId=myOnPageContent"
title=
"add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
或
- <a href="#TB_inline?height=155&width=300&
-
inlineId=hiddenModalContent&modal=true"
-
class="thickbox">Show hidden modal content.</a>
<a href="#TB_inline?height=155&width=300&
inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
前者是 按钮，后者是超链接 inlineId 是所要弹出的层的id
jsp代码如下
- <%@ page language="java" contentType="text/html; charset=utf-8"%>
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
-
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
-
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
- <script>
- $(function () {
-
$('#selectProvince > ul > li').click(function () {
-
$('#province').val($(this).val());
- tb_remove();
- });
- });
- </script>
- </head>
-
- <body>
-
<input type="text" id="province" >
-
<a href="#TB_inline?height=155&width=300&inlineId=selectProvince&
-
modal=true" class="thickbox">请选择城市</a>
-
<div id="selectProvince" style="display:none">
- <ul>
-
<li id="1">山东</li>
-
<li id="2">北京</li>
-
<li id="3">香港</li>
- </ul>
- </div>
-
- </body>
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<script>
$(function () {
$('#selectProvince > ul > li').click(function () {
$('#province').val($(this).val());
tb_remove();
});
});
</script>
</head>
<body>
<input type="text" id="province" >
<a href="#TB_inline?height=155&width=300&inlineId=selectProvince&
modal=true" class="thickbox">请选择城市</a>
<div id="selectProvince" style="display:none">
<ul>
<li id="1">山东</li>
<li id="2">北京</li>
<li id="3">香港</li>
</ul>
</div>
</body>
其中modal=true表示为模态化。tb_remove();为关闭该层 modal=false为非模态化
分享到：
相关推荐
jQuery Thickbox3.1是一款基于JavaScript库jQuery的弹出层插件，用于创建美观、功能丰富的弹出对话框。在网页设计中，弹出层常用于显示图片、视频、iframe内容或者任何HTML元素，而无需离开当前页面。Thickbox3.1...
JQuery Thickbox是一款功能强大的弹出层插件，它允许用户在现有的网页上创建美观的、响应式的轻量级模态窗口，用于展示图片、网页内容、IFrame以及多图分页浏览。Thickbox利用jQuery库的强大功能，提供了一种简洁的...
【jQuery弹出层插件thickbox】是一种广泛使用的JavaScript库，它基于强大的jQuery框架，为网页添加了优雅且功能丰富的弹出层效果。 Thickbox主要用于创建全屏背景的图片查看器、轻量级的模态对话框以及iframe加载等...
jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持...
jQuery弹出层插件在网页开发中非常常见，它们用于创建弹窗、模态对话框、图片预览等效果，增强了用户体验。以下是一些流行的jQuery弹出层插件及其特点： 1. **Thickbox**: Thickbox是一款轻量级的jQuery插件，用于...
Thickbox是一款基于jQuery库的弹出层插件，它为网页添加了丰富的交互体验，让用户可以在不离开当前页面的情况下查看图像、视频、IFRAME等多媒体内容。这个插件以其简洁的API和灵活的配置选项深受开发者喜爱，极大地...
**jQuery弹出层插件Thickbox：深度解析与学习指南** Thickbox是一款非常流行的jQuery插件，它为网页提供了优雅的、全屏的弹出层效果，用于展示图片、HTML内容、Iframe和多媒体资源。这款插件以其易用性和丰富的功能...
ThickBox是一款经典的JavaScript弹出层插件，它在网页设计和开发中广泛使用，尤其在展示图片、加载Ajax内容以及内嵌各种类型的内容时，提供了便捷的用户体验。这款插件以其灵活性、可定制性和易用性而备受青睐。下面...
**jQuery 弹出层插件：ThickBox** 在网页设计和开发中，弹出层是一种常见的交互元素，用于展示额外的信息或者进行特定的操作，如显示大图、加载Ajax内容或嵌入页面。jQuery作为一款广泛使用的JavaScript库，拥有...
《深入解析jQuery弹出层插件thickbox》 在Web开发中，弹出层（Modal）是一种常见的交互设计元素，用于在当前页面上显示额外信息或进行特定操作，而无需跳转到新页面。jQuery作为一款强大的JavaScript库，提供了丰富...
本文将深入探讨jQuery弹出层插件，包括thickbox、colorbox、facebox、jqueryalert和shadowbox，这些都是用于创建美观、交互性强的弹出窗口的优秀工具。 首先，我们来看thickbox。Thickbox是一款基于jQuery的全屏弹...
最终效果： 代码如下: <!... <head> <... charset=utf-8″/>...弹出层插件:jquery.artwl.thickbox.js</title> [removed][removed] [removed] /* File Created: 三月 1, 2012 Author:artw
本主题将深入探讨jQuery中的弹出层（Modal）和浮动层（Overlay）的实现，这两种技术在网页交互和用户体验设计中至关重要。 一、jQuery弹出层（Modal） 弹出层通常用于显示重要的信息、提示、表单或者对话框，它会...
**jQuery ThickBox** 是一个基于 **jQuery** 库的弹出层插件，它允许开发者在网页中创建优雅的、全屏的、响应式的轻量级弹窗效果。ThickBox 强调用户体验，提供了图片、iframe、多媒体内容（如视频和音频）以及纯...
在网页开发中，jQuery Thickbox是一个非常流行的轻量级插件，它允许我们在一个弹出的模态窗口中展示各种内容，如图片、HTML、IFrame等。在实际应用中，我们经常需要在Thickbox窗口中进行一些操作，比如上传文件，...
Thickbox是一款轻量级的jQuery插件，它能够创建全屏弹出窗口，用于展示图片、视频或者任何网页内容。这个插件常用于创建类似蒙版的效果，使得用户可以专注于当前展示的内容，而不会被页面其他元素所打扰。 首先，要...
内容索引:脚本资源,jQuery,thickbox,弹出层,jQuery插件 Thickbox 基于jQuery的弹出层操作插件，这里所说的层是太专业，因为现在的DIV网页，基于元素都是在层里面，而且本插件所弹出的层各式各样，比如登录框、无...