單擊按鈕時重疊式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>