您的位置：首页 > 其它

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

2016-06-02 12:53 113 查看

方法一：

演示: 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

//背景

var
bgObj=document.getElementByIdx_x("bgDiv");

bgObj.style.width = document.body.offsetWidth +
"px";

bgObj.style.height = screen.height +
"px";

//定义窗口

var
msgObj=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="<p
align=center>小窗口里的内容</p><p
align=center><A
href=http://www.jscode.cn><FONT
color=#0000ff>网页特效观止</FONT></A></p>"

}

</script>

</head>

<body>

<div
id="msgDiv">

<div
id="msgShut">

  关闭</div>

<div
id="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>更多网页特效代码尽在 <a
href="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 1px
solid;z-index: 1000;

}

</style>

<div id="alert_win"
style="display:none;">

<div id="mask" style="top:0;left:0;position:
absolute;z-index:1000;"
class="bg"></div>

<DIV class=beian_winBG
id=beian_popup>

<div id="divOneStep"
style="z-index:1002;width:100%;height:200px;background:
#fff;position:absolute;">

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

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

</div>

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

</DIV>

</div>

<a href="javascript:;"
onClick="alert_win.style.display='block';">点击这里</a>

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

标签：

相关文章推荐

新的分享

章节导航