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. Basically this is for me to learn, but I hope this is for beginners of JavaScript.
Development Environment Browser: Google Chrome System: WordPress
Japanese version
【JavaScript&CSS】ボタンを押したらメッセージを表示する
alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。自分の学習・メモ用がメインですが、プログラミング…
目次
Examples
Button-2
Button-2 clicked!
An accordion type. The message displayed below the button. If you click the button again, the message disappears.
Button-3
A modal window type. If you click the button, the screen gets dark and the message display at the middle of the screen. If you click the part of dark, back to normal screen.
Code
Button-1: Alert Type
The most simple way to display a message. Just use the JavaScript function “alert()”.
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. You can also make an accordion menu with this way.
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. This way is called “modal window” generally.
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.