Question

JS弹出层后能点击到弹出层后面的内容是怎么回事？

HTML中使用JS弹出一个层，层中使用iframe调用另外一个页面，现在发现在这个弹出层中有内容的地方是正常的，但是在弹出层窗口没有内容的地方能够点击到弹出层后面的内容，请问是怎么回事，要怎么解决？

Answer 1

这是因为你得弹出曾没有覆盖页面全部地方，把弹出层的位置设置为fixed，然后宽度和高度都设置为100%，至于iframe可以放置在中间合适的地方

追问

你没理解我的意思拉，我的意思是蓝色部分就是弹出层，里面的iframe是宽高100%充满整个弹出层的，但是弹出层里面有内容的地方鼠标点击的是弹出层，iframe里没有内容的地方点击到的是弹出层后面的内容，就好像鼠标穿过了弹出层一样

追答

那么估计是跟鼠标点击事件的事件冒泡有关系了，当鼠标点击发生的内层对象即没有处理也没有取消这个事件的时候，事件会向上冒泡知道有人处理为止。所以这可能就是点在空白部分后点到下面去了原因。解决办法有很多，你可以尝试在你的层里面捕获这个事件并取消冒泡，看看event.cancelBubble或者event.stopPropagation哪个可以生效，另外也可以尝试让弹出层所有地方都变得有内容，比如使用div填充到空白的地方覆盖整个屏幕

Answer 2

必须的，显示的div如果不能遮住后面的内容，高度或宽度不够，肯定能点到下面的内容的，如果宽高够了，那么不管是不是透明的都点不到后面的内容。目测你画的紫色边框是div的实际宽高。
解决方法，弹出层后面再加一层，宽度高度为整个网页宽高（documentElement和屏幕的比较一下，取大的），再调整一下透明度就好了。

Answer 3

在里面设置个按钮 或者文字 弹出内容