Question

我正在尝试在网页上实现模态叠加。

目的是隐藏叠加层直到用户点击某个特定内容。这在Chrome和FF中运行良好。但是，在Safari中隐藏叠加层时，其中的#feature始终可见。

这是为什么？删除可见性：显式隐藏到#feature中什么都不做。

任何帮助将不胜感激！

我有这个：

<div id="overlay">
  <div id="overlay-background" onclick="overlay()"></div>
  <div id="feature-wrapper">
      <iframe id="feature" src="https://player.vimeo.com/video/74891452?color=ffffff&title=0&byline=0&portrait=0" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>     
  <div id="description"></div>
  <div id="close" onclick="overlay()"><p>close</p></a>
  </div>
</div>

<script>
  function overlay() {
    document.body.style.overflow = (document.body.style.overflow == "hidden") ? "auto" : "hidden";
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }
</script>

使用：

#overlay {
    visibility: hidden;
}

#overlay-background {
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0px;
    position: fixed;
    background-color: #000;
    opacity: 0.9;
}

#feature-wrapper {
    opacity: 1.0;
    z-index: 100;
    position: fixed;
    top: 10%;
    width: 100%;
    height: 200%;
    left: 50%;
    -ms-transform: translate(-50%,0); /* IE 9 */
    -webkit-transform: translate(-50%,0); /* Safari */
    transform: translate(-50%,0);
    text-align: center;
}

#feature {  
    z-index: 999;
    max-width: 90vw;
    max-height: 50vh;
    border-style: solid;
    border-color: #fff;
    border-width: 20px;
    margin: 2em auto;
    visibility: hidden;
}

Answer 1

尝试display: none;或opacity: 0;

CSS / HTML：无法在Safari中隐藏元素

1 个答案: