Question

在我的网页上，我有一个带有textarea框的页脚。当用户点击textarea时，我希望页面的其余部分变暗60％，就像它们处于模态中一样。当谈到高级css时，我是一个菜鸟，所以我不确定要应用的属性。

我正在使用bootstrap 3，javascript和knockout。我知道如何检测用户何时在文本区域中我只想更改背景，以便其他所有内容都是不透明的。

jsFiddle也很精彩:)

Answer 1

以下是我将如何操作 - 当用户点击文本区域时，在body上设置一个类，并为该类设置样式。

使用jQuery（你也可以使用vanilla 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的帮助下，我们将表格的事件附加到：

显示叠加层
制作所需的表单元素，例如表单内的第一个Div显示在Overlay上方（＆＃34; z-index＆＃34; CSS属性）

CSS：叠加具有Z-Index 10，因此将相关元素Z-Index 11显示在顶部：

form > div { z-index: 11; }

这个JQuery JavaScript看起来像这样：

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

要注意，这不仅仅是一个＆＃34;背景＆＃34;主题，如果您想阻止用户与页面进行任何交互，您需要一个实际阻止点击的叠加层。此外，在我们的例子中，我们还必须防止触发任何位于叠加层下方的链接。用户仍然可以使用键盘上的TAB键浏览链接并导航到按钮并使用Space键单击它，因此我们还添加了JavaScript代码以防止在编辑模式下。

编辑：一个非常基本的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>

...

随意更改选择器以定位特定元素，但是当您专注于textarea时，模式将出现在其下方，其他元素背后。

在输入焦点上使背景看起来像模态

3 个答案: