div遮罩效果

 

<%@ page language="java" pageEncoding="GBK"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
    
<html:base />

    
<title>index.jsp</title>

    
<meta http-equiv="pragma" content="no-cache">
    
<meta http-equiv="cache-control" content="no-cache">
    
<meta http-equiv="expires" content="0">
    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    
<meta http-equiv="description" content="This is my page">
    
<script language="javascript">
    
function Open()
    
{
          
//隐藏select控件
          DispalySelect(0);  
          
//显示遮罩层
          document.getElementById("divPageMask").style.display="block";
         
//处理遮罩层
          resizeMask();
          window.onResize 
= resizeMask;
          
//显示弹出窗口
          document.getElementById("divOpenWin").style.display="block";
    }

    
function Close()
    
{
          
//显示select控件
          DispalySelect(1);
          
//处理遮罩层
          divPageMask.style.width = "0px";
          divPageMask.style.height 
= "0px";
          divOpenWin.style.display 
= "none";
          window.onResize 
= null;
      
          document.getElementById(
"divOpenWin").style.display="none";
    }

    
//页面遮罩
    function resizeMask()
    
{
         divPageMask.style.width 
= document.body.scrollWidth;
         divPageMask.style.height 
= document.body.scrollHeight;
         divOpenWin.style.left 
= ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
         divOpenWin.style.top 
= ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);
    }

    
function DispalySelect(val)
    
{  //显示和隐藏select控件
         var dispalyType;
          
var arrdispalyType=["hidden","visible"];
          
var arrObjSelect=document.getElementsByTagName("select");
          
for (i=0;i<arrObjSelect.length;i++)
          
{
            arrObjSelect[i].style.visibility
=arrdispalyType[val];
          }

    }

    
    
function submit(){
        
var spanName = document.getElementById("spanName");
        
var nameText = document.getElementById("nameText");
        
var text = document.form1.text;
        
if(nameText.value!=""){
            spanName.innerHTML
=nameText.value;
            text.value
=nameText.value;
            alert(nameText.value);
            Close();
        }
else{
            spanName.innerHTML
="*";
            Close();
        }

    }

    
    
</script>
    
<style type="text/css">
    .body,td
{font-size:12px;}
    .body
{filter:alpha(opacity=50);}
    #divBase
{z-index:0;height: 100%}
    #divPageMask
{z-index:1; background-color:#cccccc; position: absolute; left:0px; top:0px; filter:alpha(opacity=50); height: 100%}
    #divOpenWin
{z-index:50; background-color:#EEEEEE; position: absolute; left:0px; top:0px; display: none; width:300px;height:150px}
    
</style>
</head>

<body>
    
<div id="divBase">
        
<align="center">
            
<href="javascript:Open();" onclick="">打开遮罩</a>
            
<br />
            
<input type="button" value="button" onClick="alert('123123')">
        
</p>
        
<table height="450" width="95%" border="1" align="center">
            
<tr>
                
<td align="center">
                    效果
                
</td>
            
</tr>
            
<tr>
                
<td align="center">
                    
<form action="?" method="post" name="form1">
                        
<input type="text" value="" name="text">
                    
</form>
                
</td>
            
</tr>
            
<tr>
                
<td align="center">
                    
<span id="spanName">*</span>
                
</td>
            
</tr>
        
</table>
    
</div>
    
<div id="divPageMask"></div>
    
<div id="divOpenWin">
        
<table border="0" width="100%">
            
<tr>
                
<td align="center" colspan="2">
                    
<href="javascript:Close();">关闭</a>
                
</td>
            
</tr>
            
<tr>
                
<td width="30%" align="center">
                    姓名
                
</td>
                
<td>
                    
<input type="text" id="nameText">
                
</td>
            
</tr>
            
<tr>
                
<td>
                    
&nbsp;
                
</td>
                
<td>
                    
<input type="submit" value="提交" onClick="submit()">
                
</td>
            
</tr>
        
</table>
    
</div>
</body>
</html:html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值