动态DIV,求代码,和注释

发布网友发布时间：2022-05-06 14:22

共2个回答

热心网友时间：2022-06-30 22:51

这个就是层遮蔽

实现这样的效果三层就OK
一个层用来显示
一个用来遮蔽显示的那个层
还有一个就是实现你说的那个div

代码给你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>

<script language="javascript" type="text/javascript">
function Open()
{
DispalySelect(0);
document.getElementById("divPageMask").style.display="block";
resizeMask();
window.onResize = resizeMask;
document.getElementById("divOpenWin").style.display="block";
}
function Close()
{
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+1000;
divPageMask.style.height = document.body.scrollHeight;
divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
divOpenWin.style.top = "20px";
}
function DispalySelect(val)
{
// var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=document.getElementsByName("Select")//.getElementsByTagName("select");

for (i=0;i<arrObjSelect.length;i++)
{
//document.write(arrObjSelect.length);
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}

function Sel(val)
{
var name=_Default.Fill(val).value;
document.getElementById("sa").innerHTML="<a class='' href=\"javascript:Pos('"+name+"');\">"+name+"</a>";
}

function Pos(val)
{
document.getElementById("sosotxt").value=val;
Close();
}

var Obj
function MouseDown(obj)
{
Obj=obj
Obj.setCapture()
Obj.l=event.x-Obj.style.pixelLeft
Obj.t=event.y-Obj.style.pixelTop
}
function MouseMove()
{
if(Obj!=null)
{
Obj.style.left=event.x-Obj.l
Obj.style.top=event.y-Obj.t
}
}
function MouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture()
Obj=null
}
}

function MouseFouce()
{
document.getElementById("back").value="1";
}

function Mouseout()
{
if(document.getElementById("back").value=="1")
{
if(_Default.SelUser(document.getElementById("uid").value).value==true)
{
document.getElementById("dislable").style.visibility="visible";
}
else
{
document.getElementById("dislable").style.visibility="hidden";
}
}
}

function Sub()
{
//alert("akjhsdjhajs");
if(document.getElementById("dislable").style.visibility=="visible")
{
alert("用户名已存在,请重新输入");
document.getElementById("uid").value="";
}
}
</script>

<style type="text/css">
.body,td{font-size:12px}
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="divPageMask">
</div>
<div id="divOpenWin" onmousedown="MouseDown(this)" onmousemove="MouseMove()" onmouseup="MouseUp()"
style="left: 0px; top: 0px">
<center style="background-color: Navy;">
<a href="javascript:Close();" style="background-color: Black;">关闭</a></center>
<table style="height: 10px; width: 300px;">
<tr>
<td>
<a href="javascript:Sel('a')">a</a>
</td>
<td>
<a href="javascript:Sel('b')">b</a>
</td>
<td>
<a href="javascript:Sel('c')">c</a>
</td>
</tr>
<tr>
<td colspan="6">
<label id="sa">
</label>
</td>
</tr>
</table>
</div>
<label>
</label>
<center>
<table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" width="650">
<tbody>
<tr>
<td align="center" bgcolor="#f9f9f9" style="background-color: #ffffff; height: 151px;">
<table cellspacing="0" cellpadding="0" width="600" style="margin-top: 20px">
<form name="f">
<tbody>
<tr>
<td style="height: 24px">
用户名:
</td>
<td style="height: 24px; width: 166px;">
<input type="text" id="uid" runat="server" onclick="MouseFouce();" onblur="Mouseout()" style="width: 159px" />
</td>
<td style="width: 142px; height: 24px;">
<label id="dislable" style="background-color: Red; visibility: hidden;">
用户名已经存在</label></td>
</tr>
<tr>
<td style="height: 24px">
密码:</td>
<td style="height: 24px; width: 166px;">
<input type="text" id="pwd" runat="server" onkeyup="value=value.replace(/^\w+$/,'')" style="width: 159px" /></td>
<td rowspan="2" style="width: 142px">
<asp:CompareValidator ID="CompareValidator3" runat="server" ControlToCompare="pwd"
ControlToValidate="disp" ErrorMessage="两次密码不一样,请认真填写" Width="147px"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>
重复密码:</td>
<td style="width: 166px">
<input type="text" runat="server" id="disp" style="width: 159px" /></td>
</tr>
<tr>
<td class="searchbar_word" style="width: 156px">
所在社区:</td>
<td style="width: 166px">
<input type="text" id="sosotxt" runat="server" />
</td>
<td align="center" class="searchbar_word" colspan="2">
<p align="center">
</p>
<p align="center">
<a href="javascript:Open();">选择地点</a></p>
<p align="center">
<select name="Select">
<option selected="selected"></option>
</select>
</p>
</td>
</tr>
<tr>
<td>
邮箱:</td>
<td style="width: 166px">
<input type="text" id="youxiang" runat="server" style="width: 158px" /></td>
<td style="width: 142px">
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="youxiang"
ErrorMessage=" 邮箱填写错误,请仔细检查" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="提交" id="button1" onclick="Sub();" />
</td>
</tr>
</tbody>
</form>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</form>
<input type="hidden" id="back" runat="server" style="overflow: auto" />
</body>
</html>

热心网友时间：2022-06-30 22:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>display</title>
<style type="text/css">
#content{
display:none;
}
</style>
<script type="text/javascript">
function block(id){
var idiv=document.getElementById(id);
idiv.style.display="block";
return false;
}
function none(id){
var idiv=document.getElementById(id);
idiv.style.display="none";
return false;
}
function prepare(){
var iid=document.getElementById('block');
iid.onclick=function(){
block('content');
none('block');
}
var inone=document.getElementById('none');
inone.onclick=function(){
none('content');
block('block');
}
}
window.onload=function(){
prepare();
}
</script>
</head>
<body>
<a href="#" id="block">display</a>
<div id="content">
<pre>

</pre>
<a href="#" id="none">none</a>
</div>
</body>
</html>