`

层的窗口使用效果

JavaScriptCSSSQLHTML 
阅读更多

页面一：

 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>角色管理</title>
<link href="<%=basePath %>css/cskt.css" rel="stylesheet" type="text/css" />


<style>

html, body {
 height: 100%;
 width: 100%;
 font-size:12px
}
.white_content {
 display: none;
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height:0px;
 padding: 6px 16px;
 border: 3px solid #D6E9F1;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
.black_overlay {
 display: none;
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color:#f5f5f5;
 z-index:1001;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
.close {
 float:right;
 clear:both;
 width:100%;
 text-align:right;
 margin:0 0 6px 0
}
.close a {
 color:#333;
 text-decoration:none;
 font-size:14px;
 font-weight:700
}
.con {
 text-indent:1.5pc;
 line-height:21px
}
</style>

<script language="javascript" type="text/javascript">

function confirmDel(){
 return window.confirm("您确定要删除吗?");
}

 function show(tag){
   var light=document.getElementById(tag);
   var fade=document.getElementById('fade');
  
   var windHeight = document.getElementById(tag).style.height;
  
   if (parseInt(windHeight.substring( 0, windHeight.
     indexOf("px"))) < 300)
    {
     //修改目标对象的高度为原有高度 + 2。
     document.getElementById(tag).style.height =
      parseInt(windHeight.substring( 0,
      windHeight.indexOf("px"))) + 10 + "px";
     //每50ms将为目标对象的告诉增加2
     tm = setTimeout("show('"+tag+"')" , 0.3);
    }
  
   light.style.display='block';
   fade.style.display='block';
  
   }
 
  function hide(tag){
   var light=document.getElementById(tag);
   var fade=document.getElementById('fade');
   light.style.height='1px';
   light.style.display='none';
   fade.style.display='none';
  }

  
  
</script>
</head>

<body style="text-align: left">

    <table border="0" cellpadding="0"  cellspacing="0" background="<%=basePath %>images/m_mpbg.gif" style="width: 100%">
          <tr>
            <td class="place" style="height: 28px">
               </td>
            <td style="height: 28px"></td>
            <td align="right" style="text-align: center; height: 28px;"></td>
            <td style="height: 28px;  text-align: left; margin-bottom:0px;"><br/>
                <a href="index.html" target="f1" onclick="show('light');">点击哈喽</a>
</td>
          </tr>
      </table>
<br />
    <br />


<div id="fade" class="black_overlay"></div>
<div id="light" class="white_content" style="height:1px;">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></div>
<iframe src="sql.sql" id="f1" name="f1" frameborder="0" style="width:100%; height:300" scrolling="no"></iframe>
</div>
</body>
</html>

 

 

页面二：页面一中红色页面

 

<html>
<title>欢迎下载</title>
<body>
Hello!
</body>
</html>

分享到：
| E-R模型与OA权限管理个人总结
评论
发表评论

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

相关推荐

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