您的位置：首页 > Web前端 > JavaScript

Javascript+div+css(滤镜)弹出窗口

2009-01-04 23:42 459 查看

写的不好，能用的话就拷去用吧(图片也上传了的)

<html>
<head><title>XP对话框效果</title>
<style type="text/css">

</style>
</head>
<style type="text/css">
#box{ width:302px; height:178px;}
#box_td1{ width:302px; height:27px; background-image:url(pic/lx_r2_c2.jpg); text-align:right;}
#box_td1 span{ font-family:"新宋体"; font-size:14px; font-weight:bold; margin-right:200px; color:#FFFFFF; padding-top:6px; height:27px;}
#shut{ margin-top:2px; margin-right:8px;}
#box_td2{ width:302px; height:143px; background-image:url(pic/lx_r4_c2.jpg);}
#box_td2_td{ width:258px; height:133px; margin-left:44px; margin-top:10px;}
#box_td3{ width:302px; height:8px;}
img{ border:none;}
.ep{ width:120px; height:18px;}
span{ color:#FF0000;}
#yanzhen{ width:60px; height:18px;}
</style>
<body>
<a href="#" style="text-decoration:none;" onClick="openDiv('box')">点击登陆</a>
<div id="box" style="position:absolute; display:none; filter:Alpha(opacity=0);" onMouseDown="clickDiv()" onMouseUp="stopDiv()">
<div id="box_td1" style="cursor:move"><span>用户登陆</span><a href="#" style="text-decoration:none;"><img src="pic/lx_r2_c4.jpg" width="23" height="21" id="shut" onClick="shoutDiv()" alt="关闭"></a></div>
<div id="box_td2">
<div id="box_td2_td">
<table>
<form action="in.html" method="post" onSubmit="return outd()" name="sf">
<tr><Td>用户名：</Td>
<td><input type="text" class="ep" name="na"> <span>*</span></td>
</tr>
<tr><Td>密码:</Td>
<td><input type="password" class="ep" name="pwd"> <span>*</span></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" id="yanzhen"></td>
</tr>
<tr><Td colspan="2" align="left"><hr size="2" corlor="#CCCCCC" width="195"></Td>
</tr>
<tr><Td colspan="2" align="center" valign="middle"><input type="submit" value="提交"></Td>
</tr>
<tr>
<td height="18"></td>
<td></td>
</tr>
</form>
</table>
</div>
</div>
<div id="box_td3"><img src="pic/lx_r6_c2.jpg" width="302" height="8"></div>
</div>
</body>
<script language="javascript">
var dx
var dy
function openDiv(divId){
var obj = document.getElementById(divId)
obj.style.display="";
obj.style.left=(screen.width-800)/2;
obj.style.top=(screen.height-600)/2;
changeAlpho()
}
function clickDiv()
{
var mX = event.x
var mY = event.y
dx = mX - document.getElementById("box").style.pixelLeft
dy = mY - document.getElementById("box").style.pixelTop
if (dx<270&&dy<25){
document.getElementById("box").setCapture()
document.onmousemove = moveDiv
}
}
function moveDiv()
{
document.getElementById("box").style.left = event.x - dx
document.getElementById("box").style.top = event.y - dy
}
function stopDiv()
{
document.getElementById("box").releaseCapture()
document.onmousemove = null
}
function outd(){
var n=document.sf.na.value;
var pw=document.sf.pwd.value;
if(n==""){
alert("对不起！用户名不能为空！");
document.sf.na.focus();
return false;
}
if(pw==""){
alert("对不起！密码不能为空！");
document.sf.pw.focus();
return false;
}
return true;
}
Alpha_value=0
function changeAlpho(){
if(Alpha_value<100){
Alpha_value=Alpha_value+10;
document.getElementById("box").style.filter = "Alpha(Opacity="+Alpha_value+")"
setTimeout("changeAlpho()",60)
}else{
Alpha_value=0
}
}
function shoutDiv(){
var Divalpha=0
var obj=document.all.box;

obj.style.display="none";
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航