28,403
社区成员
发帖
与我相关
我的任务
分享谁有网页中间弹出对话框，后面整个页面变灰的源码
谁有网页中间弹出对话框，后面整个页面变灰的源码，我希望是用户一登陆，就弹出对话框，后面页面变灰，点击对话框确定后才能显示出来。有的话希望能分享一下，不胜感激！！！
...全文
请发表友善的回复…
发表回复
plcc123 2009-08-10
- 打赏
- 举报
<style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);filter:ALPHA(opacity=70); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
label{ font-size:12px;}
label a{ color:#FF0000; font-size:12px;text-decoration:none}
label a:hover{ color:#FF0000; text-decoration:underline}
.label{ font-size:12px; color:#C74152}
.input_userName{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.input_password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.btn1_Login {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px;
FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px;
FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
</style>
<!--实现层移动-->
<script type="text/javascript">
var Obj='';
document.onmouseup=MUp;
document.onmousemove=MMove;
function MDown(Object){
Obj=Object.id;
document.all(Obj).setCapture();
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
/*这里写验证的相关代码
function check()
{
if(form1.txt_userName.value = "")
{
alert();
}
}*/
</script>
</head>
<BODY >
<script language=JavaScript src="js/ad.js"></script>
<div id="massage_box"><div class="massage">
<div class="header" onmousedown=MDown(massage_box)>
<div style="display:inline; cursor:move; width:300px; position:absolute">登 陆</div>
<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand" title="关闭窗口 ">×</span></div><!--关闭窗口功能-->
<form id="form1" name="form1" action="#" method="post" style="text-align:center;margin-left:25" >
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center">
<label for="lab_userName">用户名：</label><br /><br /> </td>
<td><input type="text" name="txt_userName" value="" border="1" size="22" maxlength="20" class="input_userName" title="最长只能输入20个字符哦！" /><br /><br />
</td></tr>
<tr><td align="center">
<label for="lab_password">密 码：</label><br /><br /></td>
<td><input type="password" value="" name="password" size="23" class="input_password" title="输入密码！" maxlength="15" /><label for="lab_forgetpwd" class="label" title="忘记密码？" > <a href="#">忘记密码？</a></label><br /><br /></td></tr>
</table>
<input type="button" value=" 登 陆 " class="btn1_Login" name="btn_Login" />
<label for="lab_regist" class="label" ><a href="#">新用户注册！</a></label>
</form>
</div></div>
<!--实现底层的不可编辑性-->
<div id="mask"></div>
<div align="right"><span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand; text-align:right;"><a href="#" _fcksavedurl="#" style="text-align:right">登 陆</a></span> <a href="#" >注 册</a>
<!--实现底层的不可编辑性代码结束-->
<!--<table width="778" height="1500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
<tr>
<td> </td>
</tr>
</table>-->
</div>
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);filter:ALPHA(opacity=70); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
label{ font-size:12px;}
label a{ color:#FF0000; font-size:12px;text-decoration:none}
label a:hover{ color:#FF0000; text-decoration:underline}
.label{ font-size:12px; color:#C74152}
.input_userName{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.input_password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.btn1_Login {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px;
FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px;
FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
</style>
<!--实现层移动-->
<script type="text/javascript">
var Obj='';
document.onmouseup=MUp;
document.onmousemove=MMove;
function MDown(Object){
Obj=Object.id;
document.all(Obj).setCapture();
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
/*这里写验证的相关代码
function check()
{
if(form1.txt_userName.value = "")
{
alert();
}
}*/
</script>
</head>
<BODY >
<script language=JavaScript src="js/ad.js"></script>
<div id="massage_box"><div class="massage">
<div class="header" onmousedown=MDown(massage_box)>
<div style="display:inline; cursor:move; width:300px; position:absolute">登 陆</div>
<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand" title="关闭窗口 ">×</span></div><!--关闭窗口功能-->
<form id="form1" name="form1" action="#" method="post" style="text-align:center;margin-left:25" >
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center">
<label for="lab_userName">用户名：</label><br /><br /> </td>
<td><input type="text" name="txt_userName" value="" border="1" size="22" maxlength="20" class="input_userName" title="最长只能输入20个字符哦！" /><br /><br />
</td></tr>
<tr><td align="center">
<label for="lab_password">密 码：</label><br /><br /></td>
<td><input type="password" value="" name="password" size="23" class="input_password" title="输入密码！" maxlength="15" /><label for="lab_forgetpwd" class="label" title="忘记密码？" > <a href="#">忘记密码？</a></label><br /><br /></td></tr>
</table>
<input type="button" value=" 登 陆 " class="btn1_Login" name="btn_Login" />
<label for="lab_regist" class="label" ><a href="#">新用户注册！</a></label>
</form>
</div></div>
<!--实现底层的不可编辑性-->
<div id="mask"></div>
<div align="right"><span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand; text-align:right;"><a href="#" _fcksavedurl="#" style="text-align:right">登 陆</a></span> <a href="#" >注 册</a>
<!--实现底层的不可编辑性代码结束-->
<!--<table width="778" height="1500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
<tr>
<td> </td>
</tr>
</table>-->
</div>
mxrxhy007 2009-08-09
- 打赏
- 举报
我自己找到了一段比较简单实用的，但是这个是在同一页里实现的，有没有办法是在前一页点击“进入管理中心”，然后进入管理页面的时候弹出的呢。如果这样，我标出的红色部分该怎么改？
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style>
</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style>
</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
一把编程的菜刀 2009-08-09
- 打赏
- 举报
javascripot div登陆提示框(页面层不可用) :http://blog.csdn.net/chinmo/archive/2008/04/20/2308911.aspx
要学会自己GOOGLE
要学会自己GOOGLE
