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; } } 效果: