Question

I see Google doing this all the time. They are able to successfully create a lightbox that can’t be ignored… and even though the content behind it is visible (i.e. a form you would otherwise be able to fill out), you cannot do anything with that content– I’ve even tried using the Document Inspector to get around the forced lightbox, and it’s very, very difficult.

So, I’m not as concerned with the validation of the content BEHIND the box as I am with really nailing home the point that the lightbox is “not to be messed with”. In other words, what’s the best way to show a box that the user isn’t supposed to (or able to) click out of until they’ve completed the action thereupon, while simultaneously showing a desaturated or partially whitened-out (but still visible) version of the content behind it?

As I said, I can code to make certain that the content behind the box isn’t actually usable unless the requisite actions have been completed (so even if they get around it, it won’t be functional). I just want to be a bit more stern with the people out there (like me) who will try simple things like a JavaScript blocker to prevent the content from lightboxing properly. Ideally, the solution I’m looking for would be cross-platform compatible and difficult to get around. I’m open to any type of solution that can be done via open-source code.

Answer 1

http://fancybox.net/

has an option hideOnContentClick: false that will only allow the user to click the “X” button in the fancy box to hide it. You could hide the “X” close button through css or take it out completely and have a javascript call when the user has completed all the fields or submitted to close the box.

Hope I read your question right.