点击连接弹出窗口层，并且背景变暗…

来源：互联网发布：弗里德曼中美七年知乎编辑：程序博客网时间：2024/06/05 02:33

方法一：

演示: http://www.jscode.cn/jscode/code_360804725.htm

http://www.jscode.cn/jave_window/360804725.htm

<!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"lang="zh-CN">

<head>

<meta http-equiv="Content-Language" content="zh-cn"/>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="robots" content="all"/>
<meta name="author" content="在远方@www.jscode.cn"/>
<meta name="Copyright" content="Copyright (c)jscode.cn" />
<link rel="icon" href="/favicon.ico"type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico"type="image/x-icon" media="screen" />
<meta name="description" content="网页特效观止"/>
<meta name="keywords" content="网页特效,网页特效代码"/>

<title>点击弹出窗口层，并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
   z-index:10001;
   width:500px;
   height:400px;
   background:white;
   border:#336699 1px solid;
   position:absolute;
   left:50%;
   top:20%;
   font-size:12px;
   margin-left:-225px;
    display:none;
}
#bgDiv {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
   right:0px;
   background-color: #777;
   filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity:0.6;
}
</style>
<script type="text/javascript">
function showDetail() { //在远方www.jscode.cn
//背景
varbgObj=document.getElementByIdx_x("bgDiv");
bgObj.style.width = document.body.offsetWidth +"px";
bgObj.style.height = screen.height +"px";

//定义窗口
varmsgObj=document.getElementByIdx_x("msgDiv");
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";

//关闭
document.getElementByIdx_x("msgShut").onclick =function(){
bgObj.style.display = msgObj.style.display ="none";
}
msgObj.style.display = bgObj.style.display ="block";
msgDetail.innerHTML="<palign=center>小窗口里的内容</p><palign=center><Ahref=http://www.jscode.cn><FONTcolor=#0000ff>网页特效观止</FONT></A></p>"
}
</script>
</head>

<body>

<divid="msgDiv">
<divid="msgShut">
关闭</div>
<divid="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p>　</p>
<p><a href="#"onClick="showDetail()">点击我试试看</a></p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>
<p>更多网页特效代码尽在 <ahref="http://www.jscode.cn/">网页特效观止</a></p>

</body>

</html>

方法二：

http://js.alixixi.com/a/2010083064308.shtml

<style>

.bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity:0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;}

.beian_winBG {

MARGIN-TOP: -100px; LEFT: 50%; MARGIN-LEFT: -190px; WIDTH: 376px;POSITION: absolute; TOP: 50%; HEIGHT:200px;border:#666666 1pxsolid;z-index: 1000;

}

</style>

<divstyle="width:100%;background:#f1f1f1;height:30px;light-height:30px;border-bottom:#6666661px solid;text-align:right;"><ahref="javascript:;"onClick="alert_win.style.display='none';">点此关闭</a></div>

<div>您的选择，不会错的，站长特效欢迎您。</div>

</div>

<divstyle="z-index:1001;position:absolute;"><iframeid="frmOneStep" width="100%" height="200" frameborder="0"scrolling="no"src="about:blank"></iframe></div>

</DIV>

</div>

0 0