`

JQuery,thickbox,弹出层

jQueryJavaScriptJSPHTML 
阅读更多
1:首先在http://jquery.com/demo/thickbox/中下载thickbox 和 JQuery
在jsp页面中加入
Java代码 复制代码
  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" />     
<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" />

或
Java代码 复制代码
  1. <a href="#TB_inline?height=155&width=300&   
  2. inlineId=hiddenModalContent&modal=true"    
  3. 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代码如下
Java代码 复制代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>   
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  4. <html>   
  5.   <head>   
  6.         <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>   
  7.     <script src="js/thickbox-compressed.js" type="text/javascript"></script>     
  8. <script>   
  9. $(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>  
<%@ 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为非模态化
分享到：
| struts 2.1.6 + spring 2,5,6 + hibernate ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics