Question

我正在开发一款似乎正在使用CSS叠加层的应用。我对CSS有基本的了解，但不是专家。

在style.css中我看到两个类：

   java -jar myapp-0.0.1-SNAPSHOT.jar --spring.application.json='{"spring": {"datasource": {"url":"jdbc:mysql://localhost:3306/db", "username":"user","password":"pw"}}}'

我在React应用程序中使用它，我需要帮助关闭叠加层。

我只是渲染一个组件并将其isShown属性设置为true，我可以打开叠加层。

但是，我不确定如何关闭它。即使我在redux存储区中将isShown值设置为false，叠加层仍然位于那里。

我很欣赏关闭叠加层的一些帮助。感谢。

Answer 1

希望它有所帮助！

.modal-wrapper.hide {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
}

Answer 2

我建议将z-index设置为-1或更低的值，因为叠加层将位于其他元素的顶部。

.modal-wrapper.hide {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

Answer 3

请尝试此代码

HTML

<div class="modal-wrapper"></div>
<div class="modal-wrapper hide"></div>

CSS

.modal-wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 15000;
  opacity: 1;
  visibility: visible;
  transition: All 0.2s ease-in-out;
  -webkit-transition: All 0.2s ease-in-out;
  -moz-transition: All 0.2s ease-in-out;
  -o-transition: All 0.2s ease-in-out; }

.modal-wrapper.hide {
     opacity: 1;
    visibility: visible;
    width: 20px;
    cursor:pointer;
    background-color: transparent;
    margin: 10px 20px;
    height: 20px;
    }

  .modal-wrapper.hide:after, .modal-wrapper.hide:before {
    content: "";
    width: 2px;
    height: 20px;
    background: #fff;
    display: inline-block;
    transform: translatex(-1px) rotate(45deg);
}
.modal-wrapper.hide:before{
     transform: translatex(0) rotate(-45deg);
}

Jsfiddle

隐藏CSS覆盖

3 个答案: