如何使用相同的按钮/悬停问题打开和关闭弹出窗口
如何使用相同的按钮/悬停问题打开和关闭弹出窗口
提问于 2021-06-18 10:34:38
我正拼命地尝试创建一个按钮，当你点击一个弹出窗口时，当你再次点击它时，弹出窗口就消失了。
此外，我试图使文本(按钮) stricktrhough当点击时，保持stricktrhough当弹出窗口是存在的，当你再次点击它时回到它原来的状态当你再次点击它并且弹出窗口已经消失.
但我有新的编码，我遇到了很多麻烦。有人来帮我吗？
我就在这里..。
在index.html中
<button id="btnPopup" class="btnPopup">X</button>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<span id="btnClose" class="btnClose">×</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';
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-18 18:15:36
当弹出打开/关闭时，您可以动态地添加/删除类。希望能帮上忙。
$('#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>
Stack Overflow用户
发布于 2021-06-18 10:43:21
如果要使用以零为值的简单dataset属性，则可以执行一个简单的小技巧( 1 - dataset.state )来切换dataset属性的状态，从而控制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'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68033642
复制相关文章
相似问题
腾讯云开发者
