Question

我已经制作了一个代码，当您进入该页面时会显示一个灯箱。像一个弹出窗口。理论上，当你按下＆＃39; x＆＃39;它出现在盒子的角落，但由于某种原因，代码无法正常工作，无法关闭，因此灯箱停留在那里。有没有人有什么建议？非常感谢帮助！

＆＃13;

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
  }

＆＃13;

.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
 background:rgba(255,255,255,0.9);
}
.lightbox.closed {
  display: none;
}

＆＃13;

<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    
    <p align="center">More text is here</p>
    
    <h1>Just text</h1>
    </div>
    
  </div>

＆＃13;

Answer 1

在您的代码段中，它已经正常运行，因此请确保将您的javascript放在<script>标记内，<script>放在<body>标记内。

如何关闭灯箱？

1 个答案: