div遮罩效果

最新推荐文章于 2021-01-04 11:06:49 发布

原创最新推荐文章于 2021-01-04 11:06:49 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#div #javascript #function #html #input #table

<%@ 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>

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>

.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>

<br />

</p>

<tr>

效果

</td>

</tr>

<tr>

</form>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

<tr>

</td>

</tr>

<tr>

姓名

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

</body>

</html:html>