Question

我在单击按钮时创建覆盖层时遇到问题，然后重新单击它会关闭覆盖层。

<section>
  <div class="col-md-12">
    <section class="masthead">           
      <span class="button">This is a button</span>            
    </section>

Answer 1

您可以为叠加层创建一个具有固定位置的POST。为您的GET添加一个onClickListener来调用<div>函数。并更改叠加层<span class="button">的{{1}}以隐藏/显示它。下面的代码示例：

toggleOverlay()

opacity

<div>

Answer 2

问题的解决方案：

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：

<!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>

CSS：

.main {
  height: 100vh;
}

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

可能是创建覆盖图的开始。但是有很多方法可以做到这一点。这是使用占据整个屏幕的固定div。仅在切换时显示它，然后单击覆盖图，会使它再次消失。

工作勤奋的人：http://plnkr.co/edit/eG8fkhvMYnzAQP0SRPSc?p=preview

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

2 个答案: