Как затемнить фон сайта body: background при нажатии курсора в поле INPUT focus а поле Input было активно и выделялось?

Question

Как затемнить фон сайта body: background при установке курсора в поле INPUT focus а поле Input было активно и выделялось?

И как это сделать при нажатии на объект к примеру div?

Пример https://prom.ua/ua/Pampersy-dlya-vzroslyh

Answer 1

Для создания эффекта затемнения, используют обычно div с абсолютным позиционированием на весь документ и делают его прозрачным(прозрачность подбирается по вкусу).

Данный элемент имеет z-index более высокий, чем остальные элементы на странице

Поверх этого элемента(с большим z-index) располагают нужные элементы для того, что бы обратить/привлечь внимание пользователя(или же просто для красоты).

По умолчанию, элементы создаются с z-index = 0. В примере ниже, для элемента "формы" указан z-index = 2, а для элемента фона z-index = 1, что бы наша форма была визульльно "активна".

Ниже пример:

// Выбираем нужные нам элементы
const greyList = document.getElementById('hov');
const input = document.getElementById('inp');
const inputNotBlur = document.getElementById('inpnotblur');
const btn = document.getElementById('btn');
const btnShow = document.getElementById('btnShow');
// Создаем функции для скрытия/отображения фона
function show() {
  greyList.style.display = 'block';
}

function hide() {
  greyList.style.display = 'none';
}
// Вешаем слушатели событий на элементы
input.addEventListener('focus', show);
inputNotBlur.addEventListener('focus', show);
btnShow.addEventListener('click', show);

input.addEventListener('blur', hide);
btn.addEventListener('click', hide);
greyList.addEventListener('click', hide);

.btn {
  display: inline-block;
  border: 1px slateblue solid;
  border-radius: 7px;
  padding: 4px;
}

#mod {
  display: block;
  padding: 10px;
  margin: 4px;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-radius: 10px;
}

#hov {
  position: absolute;
  z-index: 0;
  background-color: RGBA(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 1;
}

<div>Как затемнить фон сайта body: background при нажатии курсора в поле INPUT focus а поле Input было активно и выделялось? И как это сделать при нажатии на объект к примеру div Подскажите как это реализовать</div>
<div id="mod">
  <label for="inp">Потеря фокуса</label>
  <input type="text" id="inp" />
  <label for="inpnotblur">Нажатие кнопки</label>
  <input type="text" id="inpnotblur" />
  <div id="btn" class="btn">Закрыть</div>
  <div id="btnShow" class="btn">Показать</div>
</div>
<div>Это один из примеров, как можно затемнять фон, для фокусировки пользователя на активном элементе</div>

<div id="hov"></div>

БЛОГ НА HUSL

Как затемнить фон сайта body: background при нажатии курсора в поле INPUT focus а поле Input было активно и выделялось?

Ответы (1 шт):