`
EJB_wawa
  • 浏览: 107066 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

背景暗一点,突出当前页

    博客分类:
  • web
阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>弹出页面</title>
        <script language="javascript" type="text/javascript">
          Shade=new function()
          {
              var handle={};
              var shade;
              handle.show=function()
              {
                  if(!shade)
                  {
                      shade=document.createElement('div');
                      shade.className='tb-shade';
                      document.body.appendChild(shade);
                  }
                  with((document.compatMode=='CSS1Compat')?document.documentElement:document.body)
                  {
                      var ch=clientHeight,sh=scrollHeight;
                      shade.style.height=(sh>ch?sh:ch)+'px';
                      shade.style.width=offsetWidth+'px';
                      shade.style.display='block';
                  }
              };
              handle.hide=function()
              {
                  shade.style.display='none';
                 
              };
             
              return handle;
          }
         
          function showPanel()
          {
              Shade.show();
              document.getElementById('Panel').style.display='block';
              document.getElementById('frame').src='http://www.163.com';
              document.getElementById('Panel').scrollIntoView();
          }
         
          function hidePanel()
          {
              Shade.hide();
              document.getElementById('Panel').style.display='none';
             
          }
        </script>

        <style>
.tb-shade {
    display: none;
    z-index: 2007;
    filter: alpha(opacity = 60);
    left: 0px;
    width: 100%;
    position: absolute;
    top: 0px;
    background-color: #000000;
    opacity: .6;
}

#Panel {
    margin-top: -260px;
    display: none;
    z-index: 2008;
    left: 50%;
    margin-left: -325px;
    width: 650px;
    position: absolute;
    top: 50%;
    background-color: #FFFFFF
}
</style>
    </head>
    <body>
        <div id="Panel" style="display: none;">
            <a style="display: block; float: right;" onclick="hidePanel();"
                href="#">【关闭】</a>
            <iframe id="frame" style="overflow-X: hidden;" src="about:blank"
                frameborder="0" width="650" height="500" scrolling="yes"></iframe>
        </div>

        <a href="#" onclick="showPanel();return false;"><strong>代码测试</strong>
        </a>
    </body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics