这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和screen.height来控制遮罩层的宽高,通过element.style.display属性来控制 遮罩层显示与否
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML遮罩层,背景半透明,只显示中间部分</title> <style> #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" language="javascript"> function showDetail(){//show detail //msgDiv var msgDiv = document.getElementById("msgDiv"); msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px"; //bgDiv var bgDiv = document.getElementById("bgDiv"); bgDiv.style.width = document.body.offsetwidth + "px"; bgDiv.style.height = screen.height + "px"; //msgShut var msgShut = document.getElementById("msgShut"); msgShut.onclick = function(){ bgDiv.style.display = msgDiv.style.display = "none"; } //content msgDiv.style.display = bgDiv.style.display = "block"; var msgDetail = document.getElementById("msgDetail"); msgDetail.innerHTML = "<p style='line-height:50px;font-size:30px;text-align:center'>显示框中的内容</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> </body> </html>
本文出自 WEB前端开发-SEO-SEM | 朱宝祥的博客,转载时请注明出处及相应链接。
本文永久链接: http://qitiancom.com/archives/959