What is the best way to create a close button using JavaScript?

Question

What is the best way to create a close button using JavaScript?

I just started learning JavaScript and I want to figure out how to make the close button close the div .popup1 in the following 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"gt;&times;</span>
      </button>
    </div>
  </div>
  </div>

My plan is to make the close button trigger a function upon clicking to add a class with display: none. Would that be the best approach? I also want to include a fadeout transition when the close button is clicked.

Can anyone provide guidance on how to achieve this? Are there any alternate solutions I should consider?

javascript jquery html css

Answer 1

Answer №1

You can simply utilize the display:none property in JavaScript without the need to include any additional classes:

Using JavaScript:

function hidePopup() {
    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" onclick="hidePopup()" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

Alternatively, using 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>

Answer 2

You can simply utilize the display:none property in JavaScript without the need to include any additional classes:

Using JavaScript:

function hidePopup() {
    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" onclick="hidePopup()" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

Alternatively, using 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>

Answer 3

Answer №2

Indeed, a function that adds a class can achieve the desired effect. For example, you can create a function that adds a class when the close button is clicked like this:

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

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

This will update your DOM to resemble something like:

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

To hide the element using opacity with a smooth transition, you can define your CSS like so:

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

.closed {
   opacity: 0;
}

To completely hide or remove the element from the DOM, you can listen for the transitionend event to trigger removal like this:

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

// css
.removed {
   display: none;
}

Keep in mind that transitionend triggers in both directions, so ensure that the removed class is only added when the closed class is present on the element, as shown below:

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

Answer 4

Indeed, a function that adds a class can achieve the desired effect. For example, you can create a function that adds a class when the close button is clicked like this:

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

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

This will update your DOM to resemble something like:

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

To hide the element using opacity with a smooth transition, you can define your CSS like so:

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

.closed {
   opacity: 0;
}

To completely hide or remove the element from the DOM, you can listen for the transitionend event to trigger removal like this:

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

// css
.removed {
   display: none;
}

Keep in mind that transitionend triggers in both directions, so ensure that the removed class is only added when the closed class is present on the element, as shown below:

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

What is the best way to create a close button using JavaScript?

Answer №1

Answer №2

Similar questions

showing errors in case the username does not match the specified pattern

Can someone show me how to implement RequestPromise in TypeScript?

Use the resizable function for widths greater than 1024px

What is the best way to store user data from an Angular App into the Firebase Realtime database?

Internet Explorer IE 11 encounters an "Error: Object does not support property or method" issue

Check if array2 is partially ordered as array1 in JavaScript

Why does the Formik form only validate after the second button click in this React Hooks, TypeScript, Formik, NextJS setup?

Matching the heights of child elements in different block elements using CSS (flex/grid)

Where should custom PHP code be placed in Prestashop 1.7.5?

Adding initial data to MongoDB in ExpressJS: What's the best way to include fixture data upon startup?

What is the best way to target the iframe within the wysihtml5 editor?

Change a TypeScript alias within the @types namespace

Display a specialized stock message in WooCommerce upon selecting a size variant

Encountering difficulty in adding content to a table using JavaScript. An error message appears stating that assignment to a function

Starting objects before utilizing them in the useFrame() function in react-three-fiber

Updating DOM element value from controller in AngularJs following an AJAX request

The Express application fails to receive a response from a Mongodb query function

various designs for multi-location infrastructure in angular js

Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

The For loop with varying lengths that exclusively produces small numbers