JavaScript & CSS – how to display a message window if your user clicks the button
2022
8/05
This article shows “how to display a message window if the button is clicked” with JavaScript in 3 ways.
Development Environment
Japanese version
【JavaScript&CSS】ボタンを押したらメッセージを表示する
alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。自分の学習・メモ用がメインですが、プログラミング…
目次
Examples
Button-2
Button-2 clicked!
An accordion type. The message displayed below the button.
Button-3
A modal window type.
Code
Button-1: Alert Type
The most simple way to display a message.
HTML
<div class="btn-container">
<button id="btn1">Button-1</button>
</div> CSS
.btn-container {
text-align: center;
}
button {
width: 80%;
height: 50px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:hover {
opacity: 0.7;
} JavaScript
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', () => {
alert('Button-1 clicked');
});
Button-2: Accordion Type
Set the message below the button and it can be appeared and disappeared clicking the button.
HTML
<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. CSS
.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. 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 Type Set the dark screen layer(mask) and the message window and these can be appeared and disappeared clicking the button.
HTML
<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. CSS
.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. JavaScript
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.
