如何创建一个“;强制的“;灯箱;暂停”;屏幕后面有内容


How to create a "forced" lightbox, i.e. a "Pause" screen with content behind it

我看到谷歌一直在这么做。他们能够成功地创建一个不容忽视的灯箱。。。即使它背后的内容是可见的(即,你可以填写的表格),你也不能对这些内容做任何事情——我甚至尝试过使用文档检查器绕过强制灯箱,这非常非常困难。

因此,我并不关心盒子后面内容的验证,而是真正明确灯箱"不可乱搞"这一点。换言之,显示一个用户在完成操作之前不应该(或无法)点击的框,同时显示其背后内容的去饱和或部分白化(但仍然可见)版本的最佳方式是什么?

正如我所说,我可以通过编码来确保盒子后面的内容实际上是不可用的,除非完成了必要的操作(所以即使他们绕过了它,它也不会起作用)。我只想对那些(像我一样)会尝试简单的事情(比如JavaScript拦截器)来阻止内容正常进行轻量级测试的人更加严厉一点。理想情况下,我正在寻找的解决方案将是跨平台兼容的,并且很难绕过。我对任何可以通过开源代码实现的解决方案都持开放态度。

http://fancybox.net/

有一个选项hideOnContentClick: false,只允许用户点击花式框中的"X"按钮来隐藏它。你可以通过css隐藏"X"关闭按钮,也可以在用户完成所有字段或提交关闭框时将其完全取出并进行javascript调用。

希望我没看错你的问题。

大多数灯箱功能都带有此功能。然而,制作自己的,这是一个两层的概念。基本上是2个DIV。一个跨到打开的浏览器的所有四个角的。大多数人会给它一个颜色或黑色的东西,然后在上面设置一个透明度。之后你在上面设置了一个高锌指数。一旦你有了这个,你就在里面放另一个DIV,以模仿你的灯箱需求。这样一来,用户就不能只点击方框就可以得到他们想要的东西。总之,javascript和CSS很容易处理,你只需要在浏览器中使用一个开发工具来关闭它们,只剩下原始表单。

编辑底线是,客户端的任何东西都是容易出错的。如果有人下定决心,他们会绕过它。如果你这样做是为了保护机器人的安全,如果控制机器人的人足够聪明,那就行不通了。我这么说只是因为我希望不要有任何错误的希望,认为这将是解决问题的一种手段。不要误解我的意思,这会在一定程度上绕过许多人,但那些有恶意的人会通过一点XSS或其他旨在打破仅客户端概念的各种措施来轻松打破这个概念。

编辑2Jquery UI和Twitter的Bootstrap都有很好的Dialog概念,这是你网站的普通日常用户无法轻易破解的。