天天看点

点击弹出窗口层,并且背景变暗渐变

<!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" >

<head>

<!-- meta data -->

<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon" media="screen" />

<link rel="shortcut icon" href="/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon" media="screen" />

<meta name="description" content="缃?椤电?规??瑙?姝? />

<meta name="keywords" content="缃?椤电?规??,缃?椤电?规??浠g??" />

<!-- site title -->

<title>?瑰?诲脊?虹???e?锛?骞朵?????????娓???---缃?椤电?规??瑙?姝?www.jscode.cn|缃?椤电?规??浠g??</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() { //?ㄨ???ww.jscode.cn

//????

? var bgObj=document.getElementById("bgDiv");

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

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

//瀹?涔?绐???? var msgObj=document.getElementById("msgDiv");

? msgObj.style.marginTop = -75 +? document.documentElement.scrollTop + "px";

//?抽??

? document.getElementById("msgShut").onclick = function(){

? bgObj.style.display = msgObj.style.display = "none";

? }

? msgObj.style.display = bgObj.style.display = "block";

? msgDetail.innerHTML="<p align=center>灏?绐??i??????瀹?lt;/p><p align=center><A href=http://www.jscode.cn><FONT color=#0000ff>缃?椤电?规??瑙?姝?lt;/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="#" target="_blank" rel="external nofollow" onClick="showDetail()">?瑰?绘??璇?璇???</a></p>

<p>??</p>

<p>??</p>

<p>??</p>

<p>??</p>

<p>?村?缃?椤电?规??浠g??灏藉??<a href="http://www.jscode.cn/">缃?椤电?规??瑙?姝?lt;/a></p>

</body>

</html>?