Как смазать фон под всплывающим окном?

Question

[ivadfox]

Есть простой всплывающий по клику pop-up.

#Wrapp,#Wrapp2 {
 top:0;
  left:0;
 position:fixed;
 background-image:url(img/bg_hover.png);
 opacity: 1;
 width:100%;
 height:100%;
 z-index:10000;
 
}
#tt,#tt2 {
	color:#FFF;
	font-family: Calibri;
	text-align:left;
  position:relative;
  background-image:url(img/bg_hover.png);
  width:80%;
  padding:1vw;
  height:50vw;
  margin:auto;
  margin-top:5vw;
  


}
div.close {
  cursor:pointer;
  position:absolute;
  font-weight:700;
  text-shadow:#000 1px 1px 0;
  color:red;
  right:7px;
  top:2px;
}

<script type="text/javascript">
  function openbox(id,tt) {
	var div = document.getElementById(id);
	var tt_div = document.getElementById(tt);
	if(div.style.display == 'block') {
		div.style.display = 'none';
	}
	else {
		div.style.display = 'block';
	}
  }
</script>

Фон весь прозрачный, как сделать так, что бы задний план смазывался?
Что-то вроде эффекта blur, но не могу заставить смазываться именно задний план..
И ещё.. как сделать так, что бы окно закрывалась по клику на фон?

Answer 1

[Ilya Korablev]

Курите Яндекс.
Тыц
Тыц

Comments

[ivadfox]

а всё одно не очень понятно, как это реализовать на моем примере..

Answer 2

[olamedia .]

закрытие по клику снаружи - вешаете onclick на body, по нему закрытие.
при клике по контейнеру - отменяете событие клика

чтобы навесить фильтр на "фон" - вешайте его на контейнер с контентом сайта,
а модальное окно и его контейнер с фоном - добавляете после него

<div style="фильтр">СОДЕРЖАНИЕ</div>
<div>ОКОШКО</div>

Comments

[ivadfox]

не понял. мне надо навесить на весь контент сайта фильтр? а как сделать что бы он использовался только по открытию меню?

[olamedia .]

ivadfox: да, на весь. по закрытии убираете фильтр.

[ivadfox]

olamedia .: и вот тут главный вопрос, как? я так понял фильтр можно вешать хоть на body ? а дальше что?

[olamedia .]

ivadfox: нет, не на body - иначе ваше окошко тоже попадет под фильтр

[ivadfox]

olamedia .: И всё же, можно по подробнее и мб сразу в коде?

[olamedia .]

ivadfox: вы практически просите за вас поработать. пожалуйста, задавайте конкретные вопросы.

[ivadfox]

olamedia .: я понимаю. ну, конкретней...
Куда мне вставляьт фильтр? завести отдельный div для всей остальной страницы с ним? А pop up вынести за край?
Если я так сделаю вся страница по умолчанию будет смазана.
Как его включать только по открытии и отключать по закрытии?

[olamedia .]

>завести отдельный div для всей остальной страницы с ним? А pop up вынести за край?
именно
>Если я так сделаю вся страница по умолчанию будет смазана.
скриптом же, когда надо только.
если не всю страницу надо - то обернуть только то, что надо.
>Как его включать только по открытии и отключать по закрытии?
элемент.style к примеру
а вообще, почему не используете jQuery и подобные?
чем больше нужно скриптов, тем меньше разница в размере.

[ivadfox]

olamedia .: окей, док. я чувствую себя идиотом. со скриптами работать не умею. Но, если я правильно понял то с div мы разобрались, а что добавить в скрипт?

[ivadfox]

вот так выглядит созданный div

#blur {
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
filter: url('/media/blur.svg#blur'); /* for Firefox */

}

весь сайт смазал, окошко поверх открывается нормально

[olamedia .]

https://developer.mozilla.org/en-US/docs/Web/API/H...

[ivadfox]

olamedia .: а всё одно не понял.. :(

[olamedia .]

ivadfox: стили можно менять скриптом, что именно непонятно?

[ivadfox]

olamedia .: какую строчку и куда мне вставить в моём скрипте, да бы оно работало как нужно? вот,что не понятно(

[olamedia .]

ivadfox: при открытии вставляете стиль, рядом со скрытием - очищаете.

[ivadfox]

olamedia .: а можно прям конкретно? прям готовый код?)) ну вот хоть головой о стену бейся, вот так понять не могу. в скриптах А и Б сложить сложно))

[olamedia .]

var show = function(){
box.style.display = 'block';
body.style="фильтры";
}
типа того

[ivadfox]

olamedia .: окей, снова требуется сложить А и Б.

function openbox(id,tt) {
var div = document.getElementById(id);
var tt_div = document.getElementById(tt);
if(div.style.display == 'block') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}

куда, и как задать Blur и его резкость?

[olamedia .]

if(div.style.display == 'block') {
div.style.display = 'none';
back.style = "";
}else{
div.style.display = 'block';
back.style = "фильтры";
}
где back - это контейнер со всем контентом

[ivadfox]

olamedia .: окей, док, теперь это выглядит так, но всё равно не работаетм :(

function openbox(id,tt) {
var div = document.getElementById(id);
var tt_div = document.getElementById(tt);
div.style.marginTop = ".25in";

else {
div.style.display = 'block';


}
}

if(div.style.display == 'block') {
div.style.display = 'none';
back.style = "";
}else{
div.style.display = 'block';
blur.style = " filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
filter: url('/media/blur.svg#blur'); /* for Firefox */";
}

[olamedia .]

из css фильтры убраны?

[olamedia .]

что за переменная blur? почему вначале back, а потом blur?

[ivadfox]

olamedia .: back забыл изменить, заменил на blur. из css убрал, зачем их дублировать? blur это див с контентом.

[olamedia .]

ivadfox: попробуйте console.log(blur.style), а также посмотреть на него в инспекторе элементов

[ivadfox]

olamedia .: последний комментарий мне не только не открыл глаза на проблему, но и как минимум - не понятен.

[olamedia .]

ivadfox: какой браузер используете? откройте контекстное меню и найдите пункт типа показать/инспектировать элемент. там рядом будет консолька, в которую выводятся сообщения из яваскрипта с помощью console.log("строка")

[ivadfox]

olamedia .: задал log(blur.style)
получилось

message: "log is not defined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: ErrorVM3585:2 (anonymous function)VM3550:847 InjectedScript._evaluateOnVM3550:780 InjectedScript._evaluateAndWrapVM3550:646 InjectedScript.evaluate

[olamedia .]

не log, а console.log

[ivadfox]

ну и если console(blus.style)

Uncaught TypeError: object is not a functionmessage: "object is not a function"stack: (...)get stack: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: StackTraceGetterconstructor: function () { [native code] }__proto__: Object__proto__: function Empty() {}apply: function apply() { [native code] }arguments: nullbind: function bind() { [native code] }call: function call() { [native code] }caller: nullconstructor: function Function() { [native code] }length: 0name: "Empty"toString: function toString() { [native code] }__proto__: ObjectNo Scopesset stack: function () { [native code] }arguments: nullcaller: nulllength: 1name: ""prototype: StackTraceSetterconstructor: function () { [native code] }__proto__: Object__proto__: function Empty() {}apply: function apply() { [native code] }arguments: nullbind: function bind() { [native code] }call: function call() { [native code] }caller: nullconstructor: function Function() { [native code] }length: 0name: "Empty"toString: function toString() { [native code] }__proto__: Object__proto__: Errorconstructor: function TypeError() { [native code] }name: "TypeError"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: dVM3752:2 (anonymous function)VM3663:847 InjectedScript._evaluateOnVM3663:780 InjectedScript._evaluateAndWrapVM3663:646 InjectedScript.evaluate

[ivadfox]

olamedia .: console.log говорит - не найден

[olamedia .]

блин, третий раз пишу: console.log() не log() и не console(), а console.log()

[olamedia .]

ivadfox: тогда установите другой браузер

[ivadfox]

olamedia .: и Opera и Chrome шлют меня одинаково.

[olamedia .]

ivadfox: и как же?

[ivadfox]

olamedia .: with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) {
console.log(blur.style)
}

[olamedia .]

ivadfox: почитайте, то ли вы делаете вообще frontender.info/chrome-developer-tools

[ivadfox]

olamedia .: прикрепил скрин к шапке

[olamedia .]

ivadfox: а теперь воткните console.dir(blur) после места, где добавляете фильтры - в консоли должно показаться все DOM-дерево этого элемента

[ivadfox]

olamedia .: добавил ещё один скрин.

[olamedia .]

ivadfox: да не надо это в консоли писать. алсо перейдем уже в новую тему