how to open and close a popup with same button / and hover issues

I am desperately trying to create a button that when you click on a popup appears and when you click on it again the popup disappears.

In addition to that I am trying to make the text (of the button) stricktrhough when clicked on, remains stricktrhough when the popup is present and back to its original state when you click on it again and the popup is gone...

But I'm sooo new coding and I'm having so much trouble. someone to help me?

Here is where I am...

in index.html

             <div id="overlay" class="overlay">
                 <div id="popup" class="popup">     
                    Text in popup 
                    </p>
                </div>
             </div>
             <script src="script.js"></script>

in style.css

   background-color:white;
   border: none; 
   font-size: 60pt;
   font-size: max(5vw,35px);
   color:black;
   cursor: pointer;
   display: inline-block;
   position: relative;
}

.overlay{
   position: fixed;
   left:5px;
   top:0px;
   font-size: 20pt;
   color: white;
   width:40%;
   height: 60%;
   display: none;
   z-index: 8;
}

@media only screen and (max-width: 600px) {
   .popup{
       width:20%;
    }
  }
.popup{

   margin:20% auto;
   width:90%;
   max-width: 800px;
   min-width: 300px;
   background-color: blue;
   padding: 1em;
}


/* BOUTON hover */


.btnPopup::after{
   content:'';
   display:block;
   width:0%;
   height: 10px;
   background:black;
   position: absolute;
   bottom: 45%;
   -webkit-transition: width 0.5s;
   -moz-transition: width 0.5s;
   -o-transition: width 0.5s;
  transition: width 0.5s;
}

.btnPopup:hover::after{
  width:100%;

} 

in script.js

var overlay = document.getElementById('overlay');
var btnClose = document.getElementById('btnClose');

btnPopup.addEventListener('click',openModal);
btnClose.addEventListener('click',closePopup)

function openModal(){
 overlay.style.display = 'block';

}

function closePopup(){
 overlay.style.display = 'none';
}```