如果我有一个弹出窗口(使用div),当有人点击div之外的任何地方时,如何让div返回隐藏状态？
即弹出窗口是可见的,然后有人在弹出窗口外点击,div应该再次隐藏.
我该如何实现此功能？
一种流行的方法是使用叠加层.当您创建div弹出窗口时,还会<div id="overlay">在其下方创建一个占据整个屏幕的弹出窗口:
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
或者,您可以使用此叠加层将所有其他内容变暗,例如background: #000和opacity: 0.5.
在您精心设计JavaScript以在弹出窗口下方添加此叠加层后,请为其添加一个单击侦听器.当用户点击叠加层时,您将知道他/她已在您的弹出窗口外点击.
请注意,position: fixed在旧版浏览器中不起作用.一个解决办法是,当覆盖是可见的,而不是来设置叠加position: absolute,然后暂时补充overflow: hidden到<body>,以防止用户向下滚动.