Как открыть и закрыть всплывающее окно с помощью той же кнопки / и проблемы с наведением ⇐ Jquery

[Anonymous]

Я отчаянно пытаюсь создать кнопку, которая появляется при нажатии на всплывающее окно, а при повторном нажатии на него всплывающее окно исчезает.
В дополнение к этому я пытаюсь сделать так, чтобы текст (кнопки) был зачеркнут при нажатии, оставался зачеркнутым, когда всплывающее окно присутствует, и возвращался в исходное состояние, когда вы снова нажимаете на него, и всплывающее окно исчезает...
Но я новичок в программировании, и у меня столько проблем. Кто-нибудь может мне помочь?
Вот где я нахожусь...
in index.html

X


×
Text in popup





в style.css

/* BOUTON */

.btnPopup{
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;
}

.btnClose {
float: right;
cursor: pointer;
}

/* 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%;

}


в script.js

var btnPopup = document.getElementById('btnPopup');
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';
}



Подробнее здесь: https://stackoverflow.com/questions/680 ... ver-issues