JQuery,thickbox,弹出层

1:首先在http://jquery.com/demo/thickbox/中下载thickbox 和 JQuery 
在jsp页面中加入

view source
print?
1 <input alt="#TB_inline?height=300&  
2 width=400&  
3 inlineId=myOnPageContent"   
4 title=  
5 "add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />

或

view source
print?
1 <a href="#TB_inline?height=155&width=300&  
2 inlineId=hiddenModalContent&modal=true"   
3 class="thickbox">Show hidden modal content.</a>
view source
print?
01 前者是 按钮，后者是超链接 inlineId 是所要弹出的层的id <BR>html代码如下 <PRE class=brush:csharp;collapse:true;;gutter:false;><%@ page language="java" contentType="text/html; charset=utf-8"%>  
02     
03 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
04 <html>  
05   <head>  
06         <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>  
07     <script src="js/thickbox-compressed.js" type="text/javascript"></script>    
08 <script>  
09 $(function () {  
10    $('#selectProvince > ul > li').click(function () {  
11               $('#province').val($(this).val());  
12               tb_remove();  
13 });  
14 });  
15 </script>  
16  </head>  
17       
18   <body>  
19       <input type="text" id="province" >  
20 <a href="#TB_inline?height=155&width=300&inlineId=selectProvince&  
21 modal=true" class="thickbox">请选择城市</a>  
22 <div id="selectProvince" style="display:none">  
23    <ul>  
24       <li id="1">山东</li>  
25        <li id="2">北京</li>  
26         <li id="3">香港</li>  
27    </ul>  
28 </div>  
29     
30   </body>  
31 </PRE>
view source
print?
1 其中modal=true表示为模态化。tb_remove();为关闭该层 modal=false为非模态化
posted @ 2010-06-02 16:56  rob_2010  阅读(152)  评论(0)    收藏  举报