How can I make a close button with JavaScript?

Question

I am starting with JavaScript and I would like to make the close button close the div .popup1 in 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 can I do that? Is there a 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 ');
}
});

Answer 2

You can also just use display:none in JavaScript without adding any classes:

Using JavaScript:

function myFunction() {
    document.getElementById('popup1').style.display = "none";
}

.popup1 {
  height: 100px;
  width:300px;
  position: fixed;
  z-index: 99999;
  background: white;
  bottom: 50px;
  left:50px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.45);
    -moz-box-shadow: 0 0 30px rgba(0,0,0,0.45);
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.45);

}

.rowpopup {
  display: inline-flex;
}

.textpopup {
  padding: 10px;
  margin-top: -15px;
}

.textpopup1 {
  font-size:16px;
}

.textpopup2 {
  font-size:14px;
}

.iconpopup {
  padding:10px;
}

.imgpopup {
  width:30px;
}

.hidepopup {
  display: none !important;
}

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">
          Order as soon as possible
        </div>
        <div class="textpopup2">
          there is little time remaining for this deal to end
        </div>
      </div>
      <button type="button"
      <button type="button" onclick="myFunction()" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

Or inline JavaScript code.

.popup1 {
  height: 100px;
  width:300px;
  position: fixed;
  z-index: 99999;
  background: white;
  bottom: 50px;
  left:50px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.45);
    -moz-box-shadow: 0 0 30px rgba(0,0,0,0.45);
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.45);

}

.rowpopup {
  display: inline-flex;
}

.textpopup {
  padding: 10px;
  margin-top: -15px;
}

.textpopup1 {
  font-size:16px;
}

.textpopup2 {
  font-size:14px;
}

.iconpopup {
  padding:10px;
}

.imgpopup {
  width:30px;
}

.hidepopup {
  display: none !important;
}

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">
          Order as soon as possible
        </div>
        <div class="textpopup2">
          there is little time remaining for this deal to end
        </div>
      </div>
      <button type="button" onclick="document.getElementById('popup1').style.display = 'none'" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>