选择表单时设置不透明度（可能使用“背景”属性）

泰勒

我想要除表单之外的整个屏幕的覆盖，以便人们可以专注于它。

这个解决方案是理想的，但表格不会变回来。

body {
  opacity: .4
}

.form:focus {
  opacity: 1 /* crap, doesn't work */
}

这真的行不通

some-element {
  background: rgba(0, 0, 0, .4)
}

j-弹簧

您可以使用一些 javascript 来选择您的的父级inputs以及覆盖层并与之交互。你可以切换活动类，这样你就可以使用实际的 CSS 来管理你的 CSS，我觉得它更清晰。

$(document).ready(function() {
  var overlay = $('#overlay');

  $('input').focusin(function(){
    $(this).parent().addClass('active');
    overlay.addClass('active');
  });

  $('input').focusout(function(){
    $(this).parent().removeClass('active');
    overlay.removeClass('active');
  });
});

form {
  position: relative;
  background-color: white;
  padding: 20px;
}

form.active {
  z-index: 100;
}

#overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 0;
  background-color: rgba(0,0,0,0.5);
}
#overlay.active {
  display: block;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <form>
    <input type="text" name="" value="">
  </form>

  <div id="overlay"></div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。