查看: 12194|回复: 1

div相对定位 & div屏幕居中弹出层效果 JS事件操作 checkbox全选赋值

[复制链接]

lala

电梯直达

1^#

发表于 2009-12-2 00:06:58 | 只看该作者回帖奖励

|倒序浏览 |阅读模式

div相对定位 & div屏幕居中弹出层效果 JS事件操作 checkbox全选赋值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<style>.City {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: none; Z-INDEX: 20000; ; LEFT: expression
((document.body.offsetWidth-this.offsetWidth)/2+document.body.scrollLeft); BORDER-LEFT: #000 1px solid; WIDTH: 300px; BORDER
-BOTTOM: #000 1px solid; POSITION: absolute; ; TOP: expression((document.body.offsetHeight-
this.offsetHeight)/2+document.body.scrollTop); HEIGHT: 150px; BACKGROUND-COLOR: #ffffff
}
.face {
DISPLAY: none; Z-INDEX: 19000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px;
HEIGHT: 100%; BACKGROUND-COLOR: #000
}
</style>
<A style="CURSOR: pointer" onclick="SelectCity('h_City')" href="javascript:void(0);">点击选择<IMG alt="点击选择城市"
src="../images/Select.gif" align="absMiddle" border="0"></A><input name="h_City" id="h_City" type="text" />
<div class="face" id="face"></div>
<div class="City" id="lay_city">
   <div style="HEIGHT: 20px; BACKGROUND-COLOR: #e8e8e8">选择发布该广告的分中心网站</div>
   <INPUT onclick="SelectAll(this.checked)" type="checkbox" name="AllCity">全选<br>
   <INPUT type='checkbox' value='1' name='City'>北京<INPUT type='checkbox' value='2'
name='City'>天津
   <input type="button" value="确定" name="SetValebutton">
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-
index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<script>
function SelectCity(HiddenFill)
{
var SetValebutton=document.getElementsByName("SetValebutton");
SetValebutton[0].onclick = function(){SetVale(HiddenFill);};
face.style.display='block';
lay_city.style.display='block';
ShowDiv(document.all.h_City,document.all.lay_city);
}
function ShowDiv(RelativeObj,DivObj){
with(RelativeObj){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= "BODY"){
   x+=objParent.offsetLeft;
   y+=objParent.offsetTop;
   objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}

with(DivObj.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function SetVale(f)
{
var a=document.getElementsByName("City");
var cInput=document.getElementById(f);
var valu='';
for(var i = 0 ;i<a.length;i++)
{ if(a[i].checked) { valu += ','+a[i].value; }
}
cInput.value=valu.substr(1,valu.length-1);
face.style.display='none';
lay_city.style.display='none';
SelectAll(false);
}
function SelectAll(chkVal)
{
var cInput=document.getElementsByName("City");
for(var i=0;i<cInput.length;i++)
{ if(cInput[i].type=="checkbox") cInput[i].checked=chkVal; }
}
</script>

收藏0

使用道具举报

返回列表

		自动登录	找回密码
密码			注册

div相对定位 & div屏幕居中 弹出层 效果 JS事件操作 checkbox全选 赋值

div相对定位 & div屏幕居中弹出层效果 JS事件操作 checkbox全选赋值