JavaScript & CSS – how to display a message clicking the button – 4 ways

How to display a message with JavaScript in 4 ways

This article shows “how to display a message window if the button clicked” with JavaScript in 4 ways.
Basically this article is for me to learn, but I hope this is for JavaScript beginners.

目次

Examples

Alert

Accordion

Clicking the button displays a message below the button.

Clicking the button again, the message disappears.

Modal Window

Clicking the button, the screen gets dark and the message displayed at the middle of the screen.

Clicking the part of dark area, back to normal screen.

Popup Message

Clicking the button displays a message from the bottom of the screen.

In 3 seconds, the message disappears.

HTML / CSS / JavaScript – Code

Button-1: Alert

The simplest way to display a message.
Just use the JavaScript function alert().

<div class="btn-container">
  <button id="btn1">Button-1</button>
</div>
.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
 opacity: 0.7;
}
const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  alert('Button-1 clicked');
});

Button-2: Accordion

Set the message below the button and it can be appeared and disappeared clicking the button.
You can also make an accordion menu with this way.

<div class="btn-container">
  <button id="btn2">Button-2</button>
  <p id="btn2-text" class="hidden">Button-2 clicked!</p>
</div>
  • Add the “hidden” class to the message node.
.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#btn2-text{
  margin: 16px 0;
  font-size: 14px;
  color: red;
}
  • The nodes with the “hidden” classes are undisplayed due to the CSS: “.hidden {display: none;}”.
  • The nodes can be displayed if the “hidden” class is removed with JavaScript.
const btn2 = document.getElementById('btn2');
const btn2Text = document.getElementById('btn2-text');

btn2.addEventListener('click', () => {
  btn2Text.classList.toggle('hidden');
});
  • If the button clicked, the “hidden” class of the message node is removed or added.

Button-3: Modal Window

Set the dark screen layer(mask) and the message window and these can be appeared and disappeared clicking the button.
This way is called “modal window” generally.

<div class="btn-container">
  <button id="btn3">Button-3</button>
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
  <p>Button-3 clicked!</p>
</section>
  • Add the “hidden” class to the mask and the message window node.
.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#mask {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  color: red;
  position: fixed;
  top: 50%;
  left: 10%;
  right: 10%;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}
  • The nodes with “hidden” classes are undisplayed due to the CSS: “.hidden {display: none;}”.
  • The nodes can be displayed if the “hidden” classes are removed with JavaScript.
  • Adjust the positions of the mask and the message window with these properties: position, top, bottom, left, right and z-index.
const btn3 = document.getElementById('btn3');
const mask = document.getElementById('mask');
const modal = document.getElementById('modal');

btn3.addEventListener('click', () => {
  mask.classList.remove('hidden');
  modal.classList.remove('hidden');
});

mask.addEventListener('click', () => {
  mask.classList.add('hidden');
  modal.classList.add('hidden');
});
  • If the button clicked, the “hidden” classes of the mask and the message window node are removed.
  • If the mask(dark part) clicked, the “hidden” classes are added to the mask and the message window node, then these are undisplayed.

Button-4: Popup Message

Set the message at the bottom of the screen and it can be appeared and disappeared with css animation clicking the button.

<div class="btn-container">
  <button id="btn4">Button-4</button>
</div>
<p id="btn4-text" class="hidden">Button-4 Clicked!</p>
.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#btn4-text {
  height: 72px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  position: fixed;
  right: 5%;
  bottom: 10%;
}

.popup-message {
  animation: popup 3s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}
const btn4Text = document.getElementById('btn4-text');
const btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
  btn4Text.classList.remove('hidden');
  btn4Text.classList.add('popup-message');
});

btn4Text.addEventListener('animationend', () => {
  btn4Text.classList.remove('popup-message');
  btn4Text.classList.add('hidden');
});

My Coding examples

You can find more coding examples this article(Japanese).

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次