Javascript 如何在单击按钮时创建覆盖？_Javascript_Css_Html

Javascript 如何在单击按钮时创建覆盖？

javascript css html

Javascript 如何在单击按钮时创建覆盖？,javascript,css,html,Javascript,Css,Html,我在单击按钮创建覆盖时遇到问题，重新单击它将关闭覆盖这是一个按钮您可以为覆盖创建一个固定位置的。为调用toggleOverlay（）函数的添加onClickListener。并更改覆盖层的不透明度，以隐藏/显示它。代码示例如下：函数切换覆盖（）{ 设overlayDiv=document.querySelector（“.overlay”）； console.log（overlydiv.style.opacity）；如果（overlydiv.style.opacity=='0'） ov

我在单击按钮创建覆盖时遇到问题，重新单击它将关闭覆盖


这是一个按钮

您可以为覆盖创建一个固定位置的

。为调用

toggleOverlay（）

函数的

添加onClickListener。并更改覆盖层的

不透明度
，以隐藏/显示它。代码示例如下：

函数切换覆盖（）{
设overlayDiv=document.querySelector（“.overlay”）；
console.log（overlydiv.style.opacity）；
如果（overlydiv.style.opacity=='0'）
overlydiv.style.opacity=1；
其他的
overlydiv.style.opacity=0；
}
.overlay{
位置：固定；
宽度：50%；
文本对齐：居中；
背景色：红色；
边界半径：10px；
字体大小：20px；
高度：30px；
不透明度：0；
过渡：不透明度。2s缓解；
}
覆盖






显示/隐藏覆盖
问题的解决方案：
Javascript:
function init() {
  var btn = document.getElementById("overlayBtn");
  var overlay = document.getElementById("overlay");
  btn.addEventListener("click", function() {
    addOverlay();
  });
  overlay.addEventListener("click", function() {
    removeOverlay();
  });
}

function addOverlay() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "block";
}

function removeOverlay() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "none";
}

window.onload = init;

HTML:
可能是创建覆盖的开始。但是有很多方法可以做到这一点。这是使用一个占据整个屏幕的固定div。只有当它被切换时才显示它，并且点击覆盖将使它再次消失
工作plunker:
我已经尝试过这个，并在rails应用程序上工作过，但是js不能在一个简单的HTML文件上工作，我在那里编辑了sublime文本，我想在chrome上看到文件的变化，还有什么解决方案吗？在中添加JavaScript。
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <main class="main">
      <section class="masthead">
        <button id="overlayBtn" class="button">This is a button</button>
      </section>
      <div class="overlay" id="overlay"></div>
    </main>
  </body>

</html>

.main {
  height: 100vh;
}

.overlay {
  background: black;
  opacity: 0.2;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}