Jquery 使用覆盖来覆盖主体和输入字段_Jquery_Html_Css

Jquery 使用覆盖来覆盖主体和输入字段

jquery html css

Jquery 使用覆盖来覆盖主体和输入字段,jquery,html,css,Jquery,Html,Css,我有一个网站，上面有一个幻灯片，当用户离开所需区域时就会触发。我打了个手势来表示一下 .覆盖{ 位置：绝对位置；不透明度：；宽度：100%；身高：100%；背景色：#3737； } 目前我知道，我可以改变不透明度和输入将变暗，但我不希望这样。正如我当前的应用程序显示的div，它应该是，它覆盖了。但问题是仍然可以看到输入字段我知道你可以在窗口事件不活跃的地方进行。因此，有些人无法在输入中单击，但这没有帮助，因为他们需要能够单击弹出的div上的close按钮我希望有一种方法，能够和

我有一个网站，上面有一个幻灯片，当用户离开所需区域时就会触发。我打了个手势来表示一下


.覆盖{
位置：绝对位置；
不透明度：；
宽度：100%；
身高：100%；
背景色：#3737；
}

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

我知道你可以在窗口事件不活跃的地方进行。因此，有些人无法在输入中单击，但这没有帮助，因为他们需要能够单击弹出的div上的close按钮

我希望有一种方法，能够和附加到身体覆盖，同时也有它隐藏所有的输入字段下面。我试着搜索了很多次，但都没有找到确切的答案

我只使用jquery和css。因此，请尝试在这些工作中使用一些东西。谢谢

解决方案：1

您可以像这样使用

：after

body:after{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#3737；
左：0；
排名：0；
不透明度：0.9；
}

看一看我的更改，它现在可以找到了

希望这对你有帮助

这是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>

第一个是在JSFIDLE上工作，但不是在我的应用程序上。我现在正在调查。但是第二个并不像你的那样出现。我也在检查。试图根据您提供的代码@daneiswork解决您的问题。我试图了解如何在不发疯的情况下将更多代码添加到jsfiddle中，因为代码太多了。我很感激你的帮助，并将继续检查它，看看我是否可以根据你的帮助调整它。**编辑。通过设置我想要滑动的div和z索引：D**--好的，第一个解决方案是可行的。我必须弄清楚如何让我的div在覆盖层上开火。但是你给出的第一个解决方案涵盖了输入。谢谢选择你的答案，因为它使输入变得黑暗，因为我希望！我的应用程序仍然存在问题。我要去看看我是否遗漏了什么。谢谢你的来信。去看看他们中的一个能不能把它掩盖起来。让它在@menhdi工作，但它有太多的调整，这就是为什么我选择了另一个解决方案。谢谢

 <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>

.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;
}