单击按钮时重叠式div无法正常工作

Question

I'm having a problem opening an overlay div when I click on the button. I'm using CSS to create the overlay and then jQuery to display the div. When I click on the button the overlay does not open.

What I'm doing wrong?

 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

You have the functions but you aren't calling them anywhere. Add an event listener to the button so when it gets clicked, a function get called. Add in a case or an if statement to check if the overlay is displayed so that it knows which function to call.

Answer 2

It works, as long as you are calling the functions.

I fiddled it together to make it clear. As already pointed out, there is no jQuery involved here, did you provide all your code?

 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>