如何创建“强制”灯箱，即后面有内容的“暂停”屏幕答案

【问题标题】：How to create a "forced" lightbox, i.e. a "Pause" screen with content behind it如何创建“强制”灯箱，即后面有内容的“暂停”屏幕
【发布时间】：2012-02-21 23:44:59
【问题描述】：

我看到 Google 一直在这样做。他们能够成功地创建一个不容忽视的灯箱......即使它背后的内容是可见的（即你可以填写的表格），你不能对这些内容做任何事情——我甚至尝试使用 Document Inspector 绕过强制灯箱，这非常非常困难。

所以，我并不关心盒子后面内容的验证，因为我真正将灯箱“不要被弄乱”这一点牢牢地钉在家里。换句话说，在用户完成操作之前，显示一个不应该（或不能）点击的框的最佳方式是什么，同时显示一个不饱和或部分变白的框（但仍然可见) 版本背后的内容？

正如我所说，我可以编写代码以确保框后面的内容实际上不可用，除非必要的操作已经完成（所以即使他们绕过它，它也不会起作用）。我只是想对那些会尝试一些简单的东西（比如 JavaScript 阻止程序）来阻止内容正确进行灯箱化的人（比如我）更加严厉一点。理想情况下，我正在寻找的解决方案将是跨平台兼容的并且难以解决。我对任何可以通过开源代码完成的解决方案持开放态度。

【问题讨论】：

搜索javascript模式对话框。您会看到很多解决方案。
您似乎对您的要求有点困惑：一方面您是在谈论允许 JavaScript 阻止程序，但另一方面，如果 JavaScript 被阻止，灯箱（或，更准确地说，“模态对话框”）首先显示？

标签： php javascript lightbox block

【解决方案1】：

http://fancybox.net/

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

希望我没看错你的问题。

【讨论】：

【解决方案2】：

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

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

编辑 2 来自 Twitter 的 Jquery UI 和 Bootstrap 都有很好的 Dialog 概念，您网站的普通日常用户将无法轻易破坏。

【讨论】：