javascript - 单击按钮时覆盖 div 不起作用

Question

当我单击按钮时，我在打开覆盖 div 时遇到问题。我使用 CSS 创建叠加层，然后使用 jQuery 显示 div。当我点击按钮时，叠加层没有打开。

我做错了什么？

function openSearch() {
  document.getElementById("overlay-search").style.display = "block";
}

function closeSearch() {
  document.getElementById("overlay-search").style.display = "none";
}

.overlay-s-style {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

<div id="overlay-search" class="overlay-s-style">
  <div class="search-block">
  </div>
</div>

Answer 1

只要您调用函数，它就可以工作。

我把它放在一起弄清楚了。正如已经指出的，这里不涉及 jQuery，您是否提供了所有代码？

function openSearch() {
  document.getElementById("overlay-search").style.display = "block";
}

function closeSearch() {
  document.getElementById("overlay-search").style.display = "none";
}

var openBtn = document.getElementById('open');
openBtn.addEventListener('click', function(ev) {
  openSearch();
});

var closeBtn = document.getElementById('close');
closeBtn.addEventListener('click', function(ev) {
  closeSearch();
});

.overlay-s-style {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay-search" class="overlay-s-style">
  <div class="search-block">
  </div>
  <button id="close">close</button>
</div>

<button id="open">open</button>