使用JS和CSS3的简单叠加弹出示例

Question

我使用JS和CSS在div覆盖系统时遇到问题。实际上我希望只要单击一个按钮就会触发div，并且想要在div本身中有一个退出按钮，这样按下div就会像第一次那样再次看不到它。我在这里使用JS切换样式，但它第一次运行良好，但似乎没有第二次使div可见。这是代码

CSS：

#overlay {

position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 500px;
margin-left: -150px;
margin-top: -100px;
background-color: black;
text-align: center;
opacity:0.8;
display:none;
border-radius:50px;
z-index: 10; 
outline: 9999px solid rgba(0,0,0,0.7);
 }

这是我用来使其可见的JS代码，但它只能运行一次。

<button onClick="document.getElementById('overlay').style.display='block';" style="color:red;">Notify me when you get online</button><p>

这又使它成为vamoose。

<button onClick="document.getElementById('overlay').style.visibility='hidden';" style="background:black; color:white; border-radius:0px;">[ X ]</button>

Answer 1

在一个案例中，您使用display和其他visibility。

有两种解决方案：

在overlay班级中添加visibility:hidden;，而不是display:none;更改为block，并显示div使用document.getElementById('overlay').style.visibility='visible':
要在div按钮中隐藏[x]，请使用document.getElementById('overlay').style.display='none';代替visibility:hidden（更好的选项）。

Answer 2

这导致display:block;的倒数不是visibility:hidden;

但 display: none;

所以在JS中它就像...display = "none"

https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

_{P.S：不要使用内联CSS和JS。保持造型和逻辑远离模板}

使用JS和CSS3的简单叠加弹出示例

最简单且最有效的方法是使用visibility因为动画您的#overlay使用CSS3

即使使用多个按钮，这是一个非常真棒示例：

function toggleOverlay() {
  document.getElementById("overlay").classList.toggle("show");
}

[].forEach.call(document.querySelectorAll(".overlayBtn"), function( el ){
  el.addEventListener("click", toggleOverlay);
});

#overlay{
  position:fixed;
  top:50%;
  left:50%;
  background:#000;
  color:#fff;
  text-align:center;
  padding:25px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.7);

  transition:0.6s;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  visibility:hidden;
  opacity:0;
}
#overlay.show{
  transform: translate3d(-50%, -50%, 0) scale(1);
  visibility:visible;
  opacity:1;
}
#overlay .overlayBtn{
  cursor:pointer;
  font-size:2em;
  position:absolute;
  top:-2px;
  right:5px;
  color:#fff;
}

<div id="overlay">
  <a class="overlayBtn">&times;</a>
  Hay yo!
</div>

<button class="overlayBtn">Show</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facilis doloremque modi alias eveniet temporibus earum distinctio similique veritatis, ratione reprehenderit architecto voluptatibus soluta possimus minus molestias vitae velit est.</p>

<button class="overlayBtn">Show</button>
<p>Eveniet, ut! Facere repellendus cum minima alias laboriosam pariatur nulla laborum magni adipisci error quo accusantium amet fugit soluta nemo, consectetur, ut asperiores ipsum voluptatum commodi rerum, ab repellat. Alias?</p>

Answer 3

显示和可见性不是同一个操作。要使代码工作，您需要使用其中一个。在这种情况下，display属性更可取，因为它会导致div从流中完全删除，而不是仅隐藏。

要修复代码，请更改此代码：

onClick="document.getElementById('overlay').style.visibility='hidden';"

到此：

onClick="document.getElementById('overlay').style.display='none';"

作为参考，visibility: hidden的反面是visibility: visible，而display: none的反面是显示属性中的任何一个，例如display: block，{{1等等。

如何在css中切换HTML div的可见性以进行覆盖

3 个答案:

使用JS和CSS3的简单叠加弹出示例