2015-01-11 3 views
1

У меня есть веб-страница, и на этой веб-странице есть много элементов (включая кнопку «изменить BG»). я хочу скрыть все остальное содержимое (исключая эту кнопку «chang BG»), когда я нажимаю кнопку «изменить BG» с помощью JavaScript. вторичная опция -> когда я нажимаю на эту кнопку, я хочу размыть все остальные элементы на этой веб-странице (исключая эту кнопку «изменить BG») с помощью JavaScript.Размытие тела с помощью javascript

Цель, когда пользователь нажимает на эту кнопку «изменить BG», он/она не должен иметь доступ к какому-либо другому контенту на этой веб-странице.

+0

Возможный дубликат [CSS: размытие и инвертирование цветов для всей страницы] (http://stackoverflow.com/questions/27613721/css-blur-and-invert-colors-for-entire-page) –

+0

В этом ответе , просто удалите теги 'feColorMatrix'. Чтобы исключить кнопку, просто поставьте ее вне тега 'svg'. –

+0

«Возможный дубликат CSS: размытие и инвертирование цветов для всей страницы». Могу ли я попросить скрипку. и я хочу его в javascript. – user1936888

ответ

0

Не размывание/скрытие одного элемента в середине страницы сложно, рассмотреть размытие/переплюснуть все и показ кнопка.

Некоторые из многих возможных способов:

  • использование существующих «диалог» Библиотека и открытый диалог с одной кнопкой на нем. Большинство библиотек поставят полупрозрачный экран в верхней части документа
  • скрыть все содержимое (т.е. display:none) и показать новую кнопку, где вы хотите
  • положения тщательно сконструированный набора элементов, которые охватывают все содержание, но кнопки (например, 4 DIV вокруг отверстия посередине).
+0

Я хочу точно то же самое (первая точка« использовать существующую «диалоговую» библиотеку и открывать диалог с помощью одной кнопки на ней. Большинство библиотек помещают полупрозрачный экран поверх документа »), но как это сделать? используя javascript – user1936888

+0

@ user1936888 Одна из многих библиотек - http://jqueryui.com/dialog/. Обычно добавляется полупрозрачный IFrame (чтобы охватить dropdonws/IFrames в IE), чтобы охватить всю документальную установку, похожую на Udai Arora [ответить ] (http://stackoverflow.com/a/27884905/477420). –

2

Одним из возможных способов может быть наличие скрытого div в теле с определенным z-индексом, скажем 100, и один элемент может иметь индекс z из 101. Скрытый div отображается каждый раз, когда вы хотеть. Вы можете установить фон на

background: rgba(100, 100, 100, 0.5) 

для непрозрачности. Остальная часть контента идет в другом div с классом «main-content» и имеет индекс z менее 100 Here is a fiddle

+0

, пожалуйста, у меня есть скрипт. – user1936888

+0

Отредактирован ответ, чтобы добавить ссылку. Примите ответ, если он полезен –

0

Сглаживание элементов DOM возможно с помощью JavaScript. Я передам код после того, как скажу следующее.

Поскольку ваша цель - запретить доступ к элементам DOM, которые вы скрываете, я должен сказать вам, что это невозможно на стороне клиента. После того как клиент извлечет все данные с сервера, они смогут получить к нему доступ. Размытие с помощью JavaScript исключительно для улучшения пользовательского интерфейса (UX).

Тем не менее, следующий код из W3C:

$("input").blur(function(){ 
    alert("This input field has lost its focus."); 
}); 

Если вы хотите, чтобы скрыть информацию, вы должны сделать это на стороне сервера, используя, например, Node.js.

+0

ok, поэтому я поставил свой вопрос в другом путь. – user1936888

+0

Я хочу, чтобы нажимал на эту кнопку «изменить BG», а всплывающий крик содержит данные другой веб-страницы. – user1936888