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

Question

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

所以，我并不关心盒子里面内容的验证，因为我确实认为灯箱是“不要搞砸”。换句话说，什么是显示用户不应该（或能够）点击的框的最佳方式，直到他们完成动作为止，同时显示去饱和或部分白化（但仍然可见）背后的内容版本？

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

Answer 1

http://fancybox.net/

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

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

Answer 2

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

修改的 最重要的是，客户端的任何东西都是错误的。如果某人有足够的决心，他们会绕过它。如果你把它作为机器人的安全手段来做，那将无法工作，如果控制机器人的人足够聪明的话。我只是说这个原因，我希望没有任何错误的希望，它将成为解决问题的手段。不要误以为它会绕道而行，但是那些有恶意的人会通过一些XSS或其他各种旨在打破客户端概念的措施轻松打破这个概念。

编辑2 来自Twitter的Jquery UI和Bootstrap都具有良好的Dialog概念，使您网站的普通日常用户无法轻松粉碎。