问题描述
在网页中点击一个按钮或者链接，打开一个窗口。背景呈现灰色，且只有新打开的窗口鼠标能够点击，其它呈灰色的地方都不能点击，这怎么做？ 问题补充：ethen 写道
解决方案
<html><head><script type="text/javascript">/** * 弹出窗口 */function showWin(){ document.getElementById('grayDiv').style.display = ''; var win = document.getElementById('infoDiv'); var left = (document.body.clientWidth - parseInt(win.style.width))/2; var top = (document.body.clientHeight - parseInt(win.style.height))/2; win.style.left = left + "px"; win.style.top = top + "px"; win.style.display = '';}/** * 隐藏窗口 */function hideWin(){ document.getElementById('grayDiv').style.display = 'none'; document.getElementById('infoDiv').style.display = 'none';}/** * 移动窗口 */function startMove(clickEvt){ var div = document.getElementById("infoDiv"); var offsetX = clickEvt.clientX - div.offsetLeft; var offsetY = clickEvt.clientY - div.offsetTop; div.onmousemove = function(moveEvt){ var tmpEvt = moveEvt; if (document.all){ // for IE tmpEvt = event; } var x = tmpEvt.clientX - offsetX; var y = tmpEvt.clientY - offsetY; div.style.left = x + "px"; div.style.top = y + "px"; }; }/** * 停止移动 */function stopMove(){ document.getElementById("infoDiv").onmousemove = null;}</script></head><body><div id="grayDiv" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:100;background:#808080;filter:Alpha(Opacity=30);opacity:0.30;display:none;"></div><input type="button" value="透明" onclick="showWin()"/><div id="infoDiv" style="position:absolute;border:1px solid #000080;width:400px;height:300px;z-index:101;background:#FFFFFF;display:none;"><table width="100%"> <tr style="background:#E8F2FE;cursor:move;" onmousedown="startMove(event)" onmouseup="stopMove(event)"> <td align="right" height="20"><a href="#" onclick="hideWin()">关闭</a></td> </tr> <tr> <td> 其他内容<br/> 在 style 中使用 z-index 时必须指定 position,<br/> 且弹出窗体的 z-index 必须大于其他元素的 z-index </td> </tr></table></div></body></html>
解决方案二：
需要用到 css 中的 filter<div id="grayDiv" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:100;background:#808080;filter:Alpha(Opacity=30);display:none;"></div><input type="button" value="透明" onclick="document.getElementById('grayDiv').style.display=''"/>
解决方案三：
网上应该有现成的效果展示你看看源码不就好了
解决方案四：
这种效果就是类似于百度登陆的那种效果，就是在登录层和原来的页面层中间再加一个层，需要掌握的技术有css和JavaScript，最关键的参数是z-index。就说这么多了。