Question

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

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

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

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

我知道您可以在不激活窗口事件的地方使用它。因此，某人无法在输入内部单击，但这无济于事，因为他们需要能够单击弹出的div上的关闭按钮。

我想要一种方法，可以将覆盖层附加到主体上，同时还要将其隐藏在下面的所有输入字段中。我尝试搜索了很多，但没有什么是精确的。

我仅使用jquery和CSS。因此，请尝试使这些功能起作用。谢谢！

Answer 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

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

jQuery

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

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

使用覆盖层覆盖正文和输入字段

2 个答案: