Как создать «принудительный» лайтбокс, то есть экран «Пауза» с контентом позади него

Question

Я вижу, что Google делает это все время. Они могут успешно создать лайтбокс, который нельзя игнорировать ... и хотя содержимое, стоящее за ним, является видимым (то есть форма, которую вы в противном случае могли бы заполнить), вы ничего не можете сделать с этим контентом - я Я даже пытался использовать инспектор документов, чтобы обойти принудительный лайтбокс, и это очень, очень сложно.

Итак, я не так обеспокоен проверкой контента за рамкой, как я действительно прикалываюсь к вопросу о том, что лайтбокс «не должен быть испорчен». Другими словами, как лучше всего показать окно, из которого пользователь не должен (или не может) щелкнуть, пока не завершит действие, одновременно показывая ненасыщенный или частично побеленный (но все же видна) версия контента за ней?

Как я уже сказал, я могу написать код, чтобы удостовериться, что содержимое, находящееся за рамкой, на самом деле не может быть использовано, пока не будут выполнены необходимые действия (поэтому, даже если они обойдут его, он не будет функционировать). Я просто хочу быть немного более строгим с людьми (такими как я), которые будут пробовать простые вещи, такие как блокировщик JavaScript, чтобы не допустить правильного лайтбокса контента. В идеале, решение, которое я ищу, должно быть кросс-платформенным и трудным для обхода. Я открыт для любого типа решения, которое может быть сделано через открытый исходный код.

Answer 1

Большинство функций лайтбокса идут с этим. Однако, делая свой собственный, это двухслойная концепция. 2 DIV в основном. Тот, который охватывает все 4 угла открытого браузера. Большинство людей придают ему цвет или что-то черное, а затем устанавливают прозрачность. После этого вы устанавливаете на него высокий zindex. После того, как вы это сделаете, вы поместите в него еще один DIV, чтобы имитировать ваши потребности в лайтбоксе. Таким образом, пользователь не может просто щелкнуть мышкой по окну и получить то, что он хочет. В общем, JavaScript и CSS легко обходятся, все, что вам нужно, это инструмент разработчика в вашем браузере, который просто отключает их, оставляя вам только необработанную форму.

EDIT Суть в том, что все на стороне клиента всегда подвержено ошибкам. Если кто-то достаточно решителен, он обойдет это. И если вы делаете это как средство защиты от ботов, это не сработает, если кто-то, кто управляет ботом, достаточно умен. Я говорю это только потому, что надеюсь, что нет никаких ложных надежд на то, что это как-то поможет решить проблему. Не поймите меня превратно, это сведет многих на нет, но те, у кого злонамеренные намерения, легко сломают концепцию с помощью небольшого XSS или других различных мер, направленных на нарушение концепций только на стороне клиента.

РЕДАКТИРОВАТЬ 2 И Jquery UI, и Bootstrap из Твиттера имеют хорошие концепции диалога, которые обычные пользователи вашего сайта не смогут легко перебрать.

Answer 2

http://fancybox.net/

У

есть опция hideOnContentClick: false, которая позволяет пользователю только нажать кнопку «X» в необычном поле, чтобы скрыть ее. Вы можете скрыть кнопку закрытия «X» через css или полностью убрать ее и вызвать вызов javascript, когда пользователь заполнил все поля или отправил запрос на закрытие окна.

Надеюсь, я правильно прочитал ваш вопрос.