JQuery,thickbox,弹出层

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为非模态化

 

 

 

你可能感兴趣的:(jquery)