Как исчезнуть все элементы, кроме сфокусированного элемента в jquery?

Question

Я нехорошо в передней части. Но теперь мне нужно написать несколько jquery. Я хочу, чтобы у меня было текстовое поле. У него есть много родителей, включая тег тела HTML. Я хочу сделать это, я хочу, чтобы весь цвет был немного темным с непрозрачностью для остальных элементов, кроме этого текстового поля, когда он сфокусирован. Это что-то вроде модальной коробки в бутстрапе. Я имею в виду угасание. Так, пожалуйста, как я могу это достичь?

Answer 1

Вы можете добавить огромный box-shadow (100vmax достаточно, чтобы покрыть все окна просмотра), возможно с коротким переходом, к элементу input, когда он получает фокус, например.

input { 
    box-shadow: 0 0 0 100vmax rgba(0,0,0, 0); 
    transition: 1s box-shadow 
} 

input:focus { 
    box-shadow: 0 0 0 100vmax rgba(0,0,0, .7); 
} 

Codepen пример: http://codepen.io/anon/pen/pjpqjg

Когда вход теряет фокус, эффект исчезает при той же продолжительности.

---

Примечание: На Safari этот эффект основан на box-shadow не работает unless you set-webkit-appearance: none;, но вы можете использовать outline вместо (проверено на версии 9.0 (9537.86.1.56.2)/MacOS 10.9.5)

input { 
    outline: 100vmax rgba(0,0,0, 0) solid; 
    -webkit-transition: 1s outline; 
    transition: 1s outline; 
} 

input:focus { 
    outline: 100vmax rgba(0,0,0, .7) solid; 
} 

Codepen пример: http://codepen.io/anon/pen/pjpqRb