CODEWITHSUNDEEP
javascripthtmljquerycssweb
dine
dine

Reputation: 95

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


<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>

in 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%;

}

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

Upvotes: 1

Views: 1436

Answers (2)

NcXNaV
NcXNaV

Reputation: 1751

You can dynamically add/remove classes when popup is opened/closed. Hopefully it helps.

$('#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>

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33813

If you were to use a simple dataset attribute with zero as the value you can do a simple little trick ( 1 - dataset.state ) to toggle the state of that dataset attribute and thus control the visibility of the popup

I read comments about the CSS being invalid but have not focused on that - simply the javascript logic.

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>

You can also simply omit the use of the dataset attribute altogether and use something like:

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

Upvotes: 1

Related Questions