1:首先在http://jquery.com/demo/thickbox/中下载thickbox 和 JQuery
在jsp页面中加入
或
前者是 按钮,后者是超链接 inlineId 是所要弹出的层的id
jsp代码如下
其中modal=true表示为模态化。tb_remove();为关闭该层 modal=false为非模态化
在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为非模态化