如何打开和关闭具有相同按钮/悬停问题的弹出窗口

Question

我拼命想创建一个按钮，当你点击一个弹出窗口时，它就会出现，当你再次点击它时，弹出窗口就会消失。

除此之外，我正试图使(按钮的(文本在点击时保持stricktrhough，当弹出窗口出现时保持strickstrhough并且当你再次点击它并且弹出窗口消失时返回到其原始状态。。。

但我是一个很新的编码，我遇到了很多麻烦。有人帮我吗？

这就是我的位置…

在index.html中

<button id="btnPopup" class="btnPopup">X</button>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<span id="btnClose" class="btnClose">&times;</span>
<p>Text in popup 
</p>
</div>
</div>
<script src="script.js"></script>

在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';
}

Answer 1

当弹出窗口打开/关闭时，您可以动态添加/删除类。希望它能有所帮助。

$('#btnPopup').on('click', function(e)  {
var btnPopup = document.getElementById('btnPopup');
var overlay = document.getElementById('overlay');
var btnClose = document.getElementById('btnClose');

if(!$(this).hasClass("opened")){
//code for open & strikethrough
overlay.style.display = 'block';
$(this).addClass("opened strike");
}else{
//code for close & original state
$(this).removeClass("opened strike");
overlay.style.display = 'none';
}  
});

/* 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{
font-size: 20pt;
color: white;
width:40%;
height: 60%;
display: none;
z-index: 8;
}
.popup{
background-color: blue;
padding: 1em;
}
.btnClose {
float: right;
cursor: pointer;
} 
/* BOUTON hover */
.btnPopup:hover:{
cursor:pointer;
} 
.strike{
text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnPopup" class="btnPopup">X</button>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<p>Text in popup 
</p>
</div>
</div>
<script src="script.js"></script>

Answer 2

如果要使用一个值为零的简单dataset属性，可以使用一个简单的小技巧(1 - dataset.state(来切换该数据集属性的状态，从而控制popup的可见性

我读过关于CSS无效的评论，但没有关注这一点——只是javascript逻辑。

document.querySelector('button').addEventListener('click',function(e){
this.dataset.state=1-this.dataset.state;
this.nextElementSibling.style.display=Number(this.dataset.state)==1 ? 'block' : 'none';
});

.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:25px;
font-size: 20pt;
color: white;
width:40%;
height: 60%;
display: none;
z-index: 8;
}

.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%;
}

<button class="btnPopup" data-state=0>X</button>
<div class="overlay">
<div class="popup">     
<p>Text in popup</p>
</div>
</div>

您也可以简单地完全省略dataset属性的使用，并使用以下内容：

this.nextElementSibling.style.display=this.nextElementSibling.style.display=='block' ? 'none' : 'block'