JavaScript & CSS – how to display a message window if your user clicks the button

How to display a message with JavaScript

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



An alert type.

An accordion type.
The message displayed below the button.
If you click the button again, the message disappears.

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.


Button-1: Alert Type

The most simple way to display a message.
Just use the JavaScript function “alert()”.

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.

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.

  • URLをコピーしました!
  • URLをコピーしました!