使用覆盖覆盖正文和输入字段答案

【问题标题】：Using an overlay to cover the body AND the input fields使用覆盖覆盖正文和输入字段
【发布时间】：2018-06-28 19:00:33
【问题描述】：

我有一个网站，在用户离开所需区域时会触发 div 上的幻灯片。我做了一个 jsfiddle 来展示一下。

http://jsfiddle.net/qxcd8y1L/

 <body class="overlay">
  <input>
 </body>    

 .overlay{
    position: absolute;
    opacity: ;
    width: 100%;
    height: 100%;
    background-color: #373737;
 }

目前我知道我可以更改不透明度并且输入会变暗，但我不希望这样。由于我当前的应用程序显示了 div 应该是它应该的样子，并且它覆盖了它应该的样子。但问题是仍然可以看到输入字段。

我知道你可以在窗口事件不活动的地方进行。所以有人无法在输入中点击，但这无济于事，因为他们需要能够点击弹出的 div 上的关闭按钮。

我想要一种能够将叠加层附加到正文的方法，同时让它隐藏下面的所有输入字段。我尝试了很多搜索，但没有什么是完全正确的。

我只使用 jquery 和 css。所以请尝试在这些工作中有所作为。谢谢！

【问题讨论】：

标签： jquery html css

【解决方案1】：

解决方案：1

你可以像这样使用:after

body:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #373737;
  left: 0;
  top: 0;
  opacity: 0.9;
}

<body>
  <input type="text" />
</body>

解决方案：2

您可以像这样使用另一个名为.overlay 的div。您可以根据您的要求使用jQuery show 或 hide div

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #373737;
  left: 0;
  top: 0;
  opacity: 0.9;
}

<body>
  <div class="overlay"></div>
  <input type="text" />
</body>

【讨论】：

第一个在 jsfiddle 上工作，但不在我的应用程序上。我现在正在调查。但第二个没有像你的那样出现。也试图检查这一点。 jsfiddle.net/qxcd8y1L/39
尝试根据您提供的代码@daneiswork 解决您的问题
我正在尝试了解如何将更多代码添加到 jsfiddle 而不会因为代码太多而发疯。我很感激它，并会继续检查它，看看我是否可以根据你的帮助对其进行调整。
** 编辑。通过设置我想用 z 索引滑动的 div 让它工作：D ** ----- 好的，所以第一个解决方案有效。我必须弄清楚如何让我的 div 现在被触发到覆盖层之上。但是输入包含在您提供的第一个解决方案中。谢谢！选择您的答案，因为它使输入变得像我希望的那样变暗！

【解决方案2】：

看看我的改动，现在可以找到了。

希望这对您有所帮助。

http://jsfiddle.net/qxcd8y1L/30/

这是 HTML 文件，也包含一些 JS 函数：

 <body>
  <div class="overlay" id="overlay">
   <button onclick="dismiss()" class="close-button">
    Close Overlay
    </button>
  </div>


   <div class="container">

     <input> 
   </div>
</body>    



<script>

    function dismiss(){
            $(".overlay").removeClass("on");
    }


    $(document).ready(function(){
            $(".overlay").addClass("on");
    });

</script>

当然，我需要一点 css 来做到这一点：

.overlay{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: #373737;
  transition: 2s opacity;
  z-index:-1;
  display:flex;
}
.on{
  opacity: 1;
  z-index:2;
}

.close-button{
   align-self:center;
   justify-self:center;
   margin:auto;
}

【讨论】：

我的应用程序仍有问题。我去看看有没有我遗漏的东西。谢谢你的帖子。去看看他们中的一个是否能进入它并能掩盖它。
让它工作了@menhdi，但它有太多的调整，这就是我选择其他解决方案的原因。谢谢！