如何打造“强迫症”？灯箱，即“暂停”按钮。屏幕后面有内容

Question

我看到谷歌一直在这样做。他们能够成功创建一个不容忽视的灯箱......即使其背后的内容是可见的（即您本来可以填写的表格），您也无法对该内容执行任何操作 - 我我什至尝试过使用文档检查器来绕过强制灯箱，但这非常非常困难。

因此，我并不关心盒子后面内容的验证，而是真正强调灯箱“不要弄乱”这一点。换句话说，最好的方式是什么来显示用户不应该（或能够）单击的框，直到他们完成相应的操作，同时显示不饱和或部分变白（但仍然可见）版本背后的内容是什么？

正如我所说，我可以编码以确保框后面的内容实际上不可用，除非已完成必要的操作（因此即使他们绕过它，它也不会起作用）。我只是想对那些会尝试一些简单的事情（例如 JavaScript 拦截器）的人（比如我）更加严厉，以防止内容正确地出现在 lightbox 中。理想情况下，我正在寻找的解决方案是跨平台兼容且难以绕过的。我对可以通过开源代码完成的任何类型的解决方案持开放态度。

Answer 1

http://fancybox.net/

有一个选项 hideOnContentClick: false ，该选项仅允许用户单击花式框中的“X”按钮将其隐藏。您可以通过 css 隐藏“X”关闭按钮，或者将其完全取出，并在用户完成所有字段或提交关闭框时调用 javascript。

希望我正确地阅读了你的问题。

Answer 2

大多数灯箱功能都带有此功能。然而，自己制作，这是一个 2 层概念。基本上是2个DIV。一个跨越打开的浏览器的所有 4 个角的区域。大多数人会给它一种颜色或黑色，然后在上面设置透明度。之后你在上面设置一个高的 zindex 。一旦你准备好这个 DIV，你就可以在其中放置另一个 DIV 来模仿你的灯箱需求。这样，用户就不能只在框内单击并获得他们想要的内容。总而言之，JavaScript 和 CSS 很容易解决，您所需要的只是浏览器中的开发人员工具来将它们关闭，只留下原始形式。

编辑
最重要的是，客户端的任何事情总是容易出错。如果有人有足够的决心，他们就会绕过它。如果您将其作为防止机器人的安全手段，那么如果控制机器人的人足够聪明，那么这是行不通的。我这么说只是因为我希望不要有任何错误的希望，认为这将成为某种方式解决问题的手段。不要误会我的意思，它会在一定程度上绕道而行，但是那些怀有恶意的人会通过一点 XSS 或其他旨在破坏仅限客户端概念的措施来轻松破坏这个概念。

编辑2
Jquery UI 和 Twitter 的 Bootstrap 都具有良好的对话框概念，而网站的普通日常用户将无法轻松掌握这些概念。