Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2316361
  • 博文数量: 252
  • 博客积分: 5472
  • 博客等级: 大校
  • 技术积分: 3107
  • 用 户 组: 普通用户
  • 注册时间: 2011-09-17 18:39
文章分类

全部博文(252)

文章存档

2012年(96)

2011年(156)

分类: 系统运维

2011-12-05 16:28:34

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>

  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  7. <html xmlns="">
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  10. <title>登陆界面</title>
  11. <script language=javascript type=text/javascript>
  12.   Shade = new function() { /*新建一个Shade函数,当隐藏图层显示时,将网页后面变暗*/
  13.     var handle = {};
  14.     var shade;
  15.     handle.show = function() {
  16.         if (!shade) {
  17.             shade = document.createElement('div'); /*新建一个div元件*/
  18.             shade.className = 'tb-shade'; /*设置shade区CSS为’tb-shade’,名称和第三步中的一致*/
  19.             document.body.appendChild(shade);
  20.         }        with((document.compatMode=='CSS1Compat')?document.documentElement:document.body) {
  21.             var ch = clientHeight, sh = scrollHeight;
  22.             shade.style.height = (sh > ch ? sh : ch) + 'px';
  23.             shade.style.width = offsetWidth + 'px';
  24.             shade.style.display = 'block';
  25.         }
  26.     };
  27.     handle.hide = function() {
  28.         shade.style.display = 'none';
  29.     };
  30.     return handle;
  31.  }
  32.  function showPanel() { /*显示panel函数*/
  33.      Shade.show();/* 执行Shade.show()命令,即后面为暗色*/
  34.      document.getElementById('Panel').style.display = 'block'; /*这里的Panel应和隐藏图层内名称一致 */
  35.      document.getElementById('frame').src = ""; /*设置frame的源,可自行修改,同时“frame”名称和隐藏图层内一致*/
  36.      document.getElementById('Panel').scrollIntoView();
  37.  }
  38.  function hidePanel() { /*隐藏panel函数 */
  39.      Shade.hide();/*执行Shade.hide命令,暗色消失*/
  40.      document.getElementById('Panel').style.display = 'none'; /*将隐藏图层CSS设置为none,即不显示*/
  41.  }
  42. </script>    


  43. <style>
  44. .tb-shade {DISPLAY: none; Z-INDEX: 2007; FILTER: alpha(opacity=60); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc; opacity: .6}/*z-index可自行修改,但必须比#Panel的值要小,filter中的alpha控制显示透明透,可自行调整*/
  45. #Panel {    MARGIN-TOP: -260px; DISPLAY: none; Z-INDEX: 2008; LEFT: 50%; MARGIN-LEFT: -325px; WIDTH: 650px; POSITION: absolute; TOP: 50%; BACKGROUND-COLOR: #fff}/*设置隐藏层位置、宽度,可自行修改*/
  46. </style>
  47. </head>
  48. <body>

  49. <div id=Panel style="DISPLAY: none">
  50. <a style="display: block; float: right" onclick=hidePanel(); href="#">【关闭】</a>
  51. <iframe id=frame style="OVERFLOW-X: hidden" src="about:blank" frameborder=0 width=650 scrolling=no height=400></iframe>
  52. </div>




  53. <a href="#" onclick="showPanel(); return false;"><strong>代码测试</strong></a>
  54. </body>
  55. </html>
阅读(1034) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~