怎样实现像163邮箱里一样的信息提示效果??
描述:
我在163邮箱里删除邮件的时候,不选择任何邮件,只直点删除结果弹出提示:请选择要删除的邮件,
提示是用一个层实现的,但是,在出现提示的同时,整个页面背景变暗,并且在页面上的超链接全部都不可以点.提示消息框的除外。再点确定的时候,背景变亮,页面上超链接又全部可以点击.
敬请高手帮助解释,像这样的效果怎样才能实现. 怎样让页面的超链接不可以点，和让背景变暗变亮。
怎么没有高手呀。
2007-07-15 12:24
2007-07-15 14:20
2007-07-15 17:31
2007-07-15 18:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a>1/DTD/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a>1-transitional.dtd" target="_blank">http://www.w3.org/TR/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a>1/DTD/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a>1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a>" target="_blank">http://www.w3.org/1999/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">xhtml</a></a>">
<head>
<meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
<title>政策文件_中国电力工程造价信息网</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
<meta name="description" content="电力工程造价信息" />
<style type="text/<a href="http://www.twocity.cn/blog/default.asp?cateID=6" target="_blank">css</a>">
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
<div class="leftClass">
<input type="button" value="点击这里" onclick="sAlert('hello');" />
</div>
<div class="rightClass">
</div>
</div>
<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:<a target="_blank" href="http://blog.163.com/jxdawei">http://blog.163.com/jxdawei</a>
//Date:2006-10-27
//Email:jxdawei@gmail.com
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>
[此贴子已经被作者于2007-7-15 19:37:10编辑过]
2007-07-15 19:33
<style>
a.aa:link{text-decoration:none;color:red}
a.aa:hover{text-decoration:none;color:red}
</style>
<body topmargin=0 leftmargin=0>
<div id="d" style="position:absolute;z-index:1;filter:alpha(opacity=50);background-color:#000000;visibility:hidden"><span style="position:relative">
<!--<center><br><br><br><br><br><br>
<table width=200 height=150 border=1 bordercolor="#000000" style="border-collapse:collapse;background-color:#FFFFFF">
<tr><td valign=middle align=center style="color:red" height=25>123131312</td></tr>
<tr><td valign=middle align=center><a href="javascript:;" onClick="hide()" class="aa" style="color:#000000">关闭</a></td></tr>
</table>
</center> --></span>
</div>
<!-- 浮层框架开始 -->
<div id="Dialogdiv" align="center" style="position:absolute; z-index:3; width: 480; height:180px;left:expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);background-color:#fff;display:none;" valign="center">
<TABLE width=540 height=170 border=1 cellpadding=0 cellspacing=0 style="border:1px solid #e7e3e7;border-collapse: collapse;">
<TR>
<TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">系统警告</TD>
</TR>
<TR>
<TD align="center" valign="center">对不起 出错了<span id="Errmsg"></span></TD>
</TR>
<TR>
<TD style="background-color:#f7f7f7;" height=30 align="center"><INPUT TYPE="button" value=" 确 定 " onClick="hide()"></TD>
</TR>
</TABLE>
<iframe src="" style="position:absolute; visibility:inherit;top:0px; left:0px; width:480px; height:181px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<!-- 浮层框架结束 -->
<li><a href="javascript:;" onClick="show('出错信息aa')">查看</a>
<table cellpadding="0" cellspacing="3" width="100%">
<tr align="center">
<td height="40" colspan="3"><strong><font color="#000099">标题：</font><font color="#FF6600">
这是一个测试表单</font></strong></td>
</tr>
<tr>
<td width="198" height="40" align="right">您的新浪会员名：</td>
<td width="250" align="left"><input id="loginname_uMessage" name="loginname" type="text" width="150px"/></td>
<td align="left" width="531"><table cellpadding="1" cellspacing="0">
<tr>
<td><table>
<tr>
<td id="uMessage"><font color="#999999">请输入您的新浪会员名（新浪VIP邮箱用户请输入:
邮箱名.vip）。 </font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">您的会员密码：</td>
<td align="left"><input id="passwordsina_pMessage" onFocus="return sl('pMessage');" name="passwd" type="password" width="150px"/></td>
<td align="left"><table cellpadding="1" cellspacing="0">
<tr>
<td><table>
<tr>
<td id="pMessage"><font color="#999999">请输入您的会员密码。</font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" style="padding:8px 0 5px 50px">为了保障您的空间安全，我们建议您使用6-16位的密码，若您的密码小于6位，请务必<a href="<a href="http://unipro.sina.com.cn/chginfo_pw.html" target="_blank">http://unipro.sina.com.cn/chginfo_pw.html</a>" target="_blank"><font color='red'><u>点击此处修改</u></font></a></td>
</tr>
<tr>
<td height="35" align="right">密码查询问题：</td>
<td align="left"><select id="pwdQ_pwdMsg" name="pwdQ" >
<option selected value="">--请您选择--</option>
<option value="我的宠物名字？">我的宠物名字？</option>
<option value="我最好的朋友是谁？">我最好的朋友是谁？</option>
<option value="我最喜爱的颜色？">我最喜爱的颜色？</option>
<option value="我最喜爱的电影？">我最喜爱的电影？</option>
<option value="我最喜爱的影星？">我最喜爱的影星？</option>
<option value="我最喜爱的歌曲？">我最喜爱的歌曲？</option>
<option value="我最喜爱的食物？">我最喜爱的食物？</option>
<option value="我最大的爱好？">我最大的爱好？</option>
<option value="我中学校名全称是什么？">我中学校名全称是什么？</option>
<option value="我的座右铭是？">我的座右铭是？</option>
<option value="我最喜欢的小说的名字？">我最喜欢的小说的名字？</option>
<option value="我最喜欢的卡通人物名字？">我最喜欢的卡通人物名字？</option>
<option value="我母亲/父亲的生日？">我母亲/父亲的生日？</option>
<option value="我最欣赏的一位名人的名字？">我最欣赏的一位名人的名字？</option>
<option value="我最喜欢的运动队全称？">我最喜欢的运动队全称？</option>
<option value="我最喜欢的一句影视台词？">我最喜欢的一句影视台词？</option>
<!-- <option value=9>其他</option> -->
</select></td>
<td align="left"><table cellpadding="1" cellspacing="0">
<tr>
<td><table>
<tr>
<td id="pMessage"><font color="#999999">请输入您的会员密码。</font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">密码查询问题：</td>
<td align="left"><select id="pwdQ_pwdMsg" name="pwdQ" >
<option selected value="">--请您选择--</option>
<option value="我的宠物名字？">我的宠物名字？</option>
<option value="我最好的朋友是谁？">我最好的朋友是谁？</option>
<option value="我最喜爱的颜色？">我最喜爱的颜色？</option>
<option value="我最喜爱的电影？">我最喜爱的电影？</option>
<option value="我最喜爱的影星？">我最喜爱的影星？</option>
<option value="我最喜爱的歌曲？">我最喜爱的歌曲？</option>
<option value="我最喜爱的食物？">我最喜爱的食物？</option>
<option value="我最大的爱好？">我最大的爱好？</option>
<option value="我中学校名全称是什么？">我中学校名全称是什么？</option>
<option value="我的座右铭是？">我的座右铭是？</option>
<option value="我最喜欢的小说的名字？">我最喜欢的小说的名字？</option>
<option value="我最喜欢的卡通人物名字？">我最喜欢的卡通人物名字？</option>
<option value="我母亲/父亲的生日？">我母亲/父亲的生日？</option>
<option value="我最欣赏的一位名人的名字？">我最欣赏的一位名人的名字？</option>
<option value="我最喜欢的运动队全称？">我最喜欢的运动队全称？</option>
<option value="我最喜欢的一句影视台词？">我最喜欢的一句影视台词？</option>
<!-- <option value=9>其他</option> -->
</select></td>
<td align="left"><table cellpadding="1" cellspacing="0">
<tr>
<td><table>
<tr>
<td id="pMessage"><font color="#999999">请输入您的会员密码。</font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">密码查询答案：</td>
<td align="left"><input id="pwdA_pwdAMsg" name="pwdA" onBlur="regCheck(this)" onChange="regCheck(this)" type="text" width="150px"/></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">性别：</td>
<td align="left"><input id="sex_sexMsg" onClick="regCheck(this)" type="radio" name="sex" value="1" class="chkinput"/>
男 <input id="sex2_sexMsg" type="radio" onClick="regCheck(this)" name="sex" value="2" class="chkinput">
女</td>
<td style="padding-left:10px"><table>
<tr>
<td width="379" id="sexMsg"><font color="#999999">正确填写基本信息，有利于您与您的朋友进行真诚交流。</font></td>
<tr> </table></td>
</tr>
<tr>
<td height="35" align="right">密码查询答案：</td>
<td align="left"><input id="pwdA_pwdAMsg" name="pwdA" onBlur="regCheck(this)" onChange="regCheck(this)" type="text" width="150px"/></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">邮编：</td>
<td align="left"><input type="text" name="textfield"></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">国家1：</td>
<td align="left"><input type="text" name="textfield2"></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">国家2：</td>
<td align="left"><input type="text" name="textfield2"></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">国家3：</td>
<td align="left"><input type="text" name="textfield2"></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" align="right">国家4：</td>
<td align="left"><input type="text" name="textfield2"></td>
<td style="padding-left:10px"><table>
<tr>
<td id="pwdAMsg"><font color="#999999">6个字母、数字或3个汉字以上（包括6个）、不要含有空格。</font></td>
</tr>
</table></td>
</tr>
<tr align="center">
<td height="35" colspan="3"><form name="form1" method="post" action="">
<input type="button" name="Submit" value=" 我要提交 " onclick="info('aaaaa');show();">
<input type="button" name="Submit" value=" 我要提交2 " onclick="info('nnnnnnn');show();">
</form></td>
</tr>
</table>
<script>
var obj=document.getElementById("d");
var Dialog_div=document.getElementById("Dialogdiv");
var t=new Object();
var Err_msg;
function info(errorinfo)
{Err_msg=errorinfo;}
function show(){
obj.style.visibility="visible";
obj.style.width=document.body.scrollWidth;
obj.style.height=document.body.scrollHeight;
Dialog_div.style.top=(parseInt(document.body.clientHeight)-parseInt(Dialog_div.style.height))/2+document.body.scrollTop-100;
Dialog_div.style.left=(parseInt(document.body.clientWidth)-parseInt(Dialog_div.style.width))/2+document.body.scrollLeft;
document.all.Errmsg.innerText=Err_msg;
Dialog_div.style.display='block';
if(obj.filters.alpha.opacity>25){
obj.filters.alpha.opacity=25;
clearTimeout(t.timer1);
return;
}else{
obj.filters.alpha.opacity+=2;
t.timer1=setTimeout("show()",20)
}
return;
}
function hide(){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity=0;
obj.style.visibility="hidden"
Dialog_div.style.display='none';
clearTimeout(t.timer2);
document.all.loginname.focus();
return;
}else{
obj.filters.alpha.opacity-=2;
t.timer2=setTimeout("hide()",20);
}
return;
}
</script>
<Script language="JavaScript1.2" src="floate.js"></Script>
</body>
2007-07-15 19:38
2007-07-16 12:26
2007-07-16 14:14
2007-07-17 13:48
2007-07-17 19:13
真是太感谢zhulei1978了,我要的效果就是这样的...