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

Question

我正在拼命尝试创建一个按钮，当您单击一个弹出窗口时，它会出现，而当您再次单击它时，弹出窗口就会消失。

除此之外，我还试图在单击时使（按钮的）文本为 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">&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

我读到 cmets 关于 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'