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" />
或
<a href="#TB_inline?height=155&width=300& inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
前者是 按钮，后者是超链接 inlineId 是所要弹出的层的id
html代码如下<%@ 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为非模态化