单击按钮

Question

我在点击按钮时打开叠加div时遇到问题。 我使用CSS创建叠加层然后使用jQuery来显示div。当我点击按钮时，叠加层无法打开。

我做错了什么？

＆＃13;

＆＃13;

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

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有这些功能，但你不能在任何地方打电话。向按钮添加一个事件监听器，以便在单击它时调用一个函数。添加case或if语句以检查是否显示覆盖，以便它知道要调用哪个函数。

Answer 2

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

我把它拼凑起来说清楚。正如已经指出的那样，这里没有涉及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>