您的位置：首页 > 其它

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

2011-11-18 15:34 302 查看

1.用JS实现
<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;//如果position: absolute;被注释，top:等属性将不起作用
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.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>小窗口里的内容</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>

2.jquery实现
<script type="text/javascript">

$(function(){
$('#click_img').click(function(){
if($('#to_click_img').css('display') == 'none'){
$('#to_click_img').css('display','block');
}else{
$('#to_click_img').css('display','none');
}
});
});
</script>

<div id="to_click_img" style="display:none;">
<table id='fudon_tab' cellspacing='0px'  ><tr valign='bottom'><td >健康档案管理</td><td >慢病管理系统</td><td >计划免疫</td></tr><tr valign='bottom'><td >传染病管理</td><td >老人保健管理</td><td >卫生监督协管</td></tr><tr valign='bottom'><td >妇幼保健管理</td><td >计划生育管理</td><td >查询与统计</td></tr></table>
</div>
<img id='click_img' onClick="showDetail()" class="sys" src="image/sys.png">

#to_click_img{
z-index:1;/*用来是鼠标上去时只在这一层，而不是会重叠，明明是选中一个，连底层的也选中。只要在层这个容器里写就好了，在tabel里无效*/
position:absolute;
/*display:block;没影响*/
left:550px;
top:270px;

#fudon_tab{
position:absolute;
background:#FFFFFF center;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
width:300px;
height:186px;
/*border-color:#0066cc;
border-style:solid;*/
border-collapse:collapse;
}

#fudon_tab td{
background:url(lcon.png) no-repeat 35px 9px  ;
border: #0066cc 1px solid;
font: 14px "宋体";
text-align:center;
color:#0066cc;
width:100px;
height:62px;
}

}
效果：

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

标签：

相关文章推荐

新的分享

章节导航