单击按钮时重叠式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

您具有这些功能，但没有在任何地方调用它们。 向按钮添加事件侦听器，以便在单击按钮时调用函数。 在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>