如何使用JavaScript制作关闭按钮？

Question

I am starting with JS and I would like to make the close button close the div .popup1 on this code:

https://jsfiddle.net/74hmx0vb/1

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">

        </div>
        <div class="textpopup2">

        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

I guess the best option is to make the close button call a function on click that adds a class with display: none, is that right? I would also like to add a fadeout transition when the close button is clicked.

How to do that? Is there any other better option?

Answer 1

That's right a function that applies a class would work as you are looking for in this case you can have a function that applies a class when the close button is clicked like:

var popupEl = document.querySelector( '. popup1' );
var button = document.querySelector( '.close' );

button.addEventListener( 'click', function() {
   popupEl.classList.add( 'closed' );
});

So your DOM will change into something like:

<div class='popup1 closed' id="popup1">
....

In that sense you can use opacity to hide and apply a transition into your element like:

.popup {
   opacity: 1;
   transition: opacity 0.5s ease-out;
}

.closed {
   opacity: 0;
}

One last thing is that this will keep the element visible just with a hidden opacity, in order to remove it from the DOM or hide it completely you can use transitionend to listen when the opacity transition has completed like:

popupEl.addEventListener( 'transitionend', function(){
   popupEl.classList.add( 'removed ');
});

// css
.removed {
   display: none;
}

Be aware that transitionend will run in both directions it means on closed applied or removed so you need to make sure you are applying the removed class only when closed class is present on the element like:

popupEl.addEventListener( 'transitionend', function(){
   if( popupEl.classList.contains( 'closed' ) ) {
   popupEl.classList.add( 'removed ');
}
});