На входе фокус сделать фон похожим на модальный

Question

На моей веб-странице у меня есть нижний колонтитул с текстовым полем. Когда пользователь нажимает на текстовое поле, я хочу, чтобы остальная часть страницы затемнялась на 60%, как будто они в модальном режиме. Я новичок, когда дело доходит до продвинутого css, поэтому я не уверен в свойствах.

Я использую bootstrap 3, javascript и нокаут. Я знаю, как определить, когда пользователь находится в текстовой области, я просто хочу изменить фон, чтобы все остальное было непрозрачным.

jsFiddle бы замечательно, а :)

Answer 1

Вот как бы я это сделать - Когда пользователь щелкает в текстовой области, установить класс на тело, и стиль класса.

с JQuery (можно использовать ванильный JS тоже)

$('.my-textarea').on('focus', function() { 
$('body').addClass('dark'); 
}); 

$('.my-textarea').on('blur', function() { 
    $('body').removeClass('dark'); 
}); 

body.dark { 
    background-color: #333; 
    opacity: 0.6; 
} 

Answer 2

Мы используем комбинацию CSS и JQuery JavaScript для этого. В основном вы должны use some Overlay method сначала наложить всю страницу (например, см. «Техника № 1»).

С помощью JavaScript, мы придаем событиям форм к:

• Показать Overlay
• Произведите необходимые элементы формы, например, первый Див внутри формы, появляется над Перекрытием ("Z-индекс" атрибут CSS)

УС: Накладки имеет Z-Index 10, чтобы дать соответствующему элементу Z-Index 11, чтобы появиться на вершине :

form > div { z-index: 11; } 

это JQuery JavaScript может выглядеть следующим образом:

$(document).on("focus", "textarea", function() { 
    $(".overlay").show(); 
}); 

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

EDIT: очень простой Fiddle

Answer 3

Хорошим решением является сделать модальное появляются за вход, а не просто сделать фон темнее, это может быть достигнуто с только CSS

... 

<style> 
textarea:focus{ 
    z-index: 901; 
    position: relative; 
} 
textarea ~ .textarea-modal{ 
    position: fixed; 
    background-color: transparent; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 900; 
    pointer-events: none; 
    transition: background-color .5s ease; 
} 
textarea:focus ~ .textarea-modal{ 
    pointer-events: auto; 
    background-color: rgba(0,0,0,0.3); 
} 
</style> 

... 

<div> 
    <textarea></textarea> 
    <div class="textarea-modal"></div> 
</div> 

... 

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