【JavaScript&CSS】ボタンを押したらメッセージを表示する

2022年7月10日2023年2月23日

alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

実装例とコード

画面にアラートを表示。

実装方法はこちら

アコーディオン。
ボタン下にメッセージを表示。
もう一度ボタンをクリックすると消える。

実装方法はこちら

モーダルウィンドウ。
ボタンをクリックすると画面が暗くなり、画面中央にメッセージを表示。
暗い部分をクリックすると元の画面に戻る。

実装方法はこちら

【おまけ】画面下からフワッとメッセージを表示

ポップアップメッセージ。
ボタンをクリックすると、画面下からフワッとメッセージが表示され、3秒ほど停止して再び消えます。

コードは以下記事で公開していますので、本記事と合わせてご覧ください。

【Javascript&CSS】ポップアップメッセージの作り方

【おまけ】ボタンを立体的にする方法

思わずクリックしたくなるような、ちょっとしたアニメーション付きのボタンをCSSで実装できます。

コードは以下記事で公開していますので、本記事と合わせてご覧ください。

【CSS】押し込まれるような立体的なボタンを作る

【ボタン１】アラートを表示させる実装方法

JavaScriptの標準機能であるalert()を使い、指定したテキストとOKボタンをもつ警告ダイアログを表示する。
3つの中ではもっとも簡単に実装できる。

alert()について

『alert(表示させたい内容)』と記述することで、画面上部にポップアップを表示させる。
表示させたい内容が文字列の場合、””で囲むことを忘れないように。

HTML / CSS / JavaScript コードはこちら

<div class="btn-container">
  <button id="btn1">ボタン１</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;
}

ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わり、ボタン全体が半透明になるCSS。

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  alert('ボタン１がクリックされました！');
});

ボタンをクリック(click)するとalert()が起動し、alertの(”)で囲まれたテキストが表示される。

【おまけ】alert()以外にも特殊なウィンドウを表示できる

confirm()

「OK」と「Cancel」を選ぶウィンドウを表示

JavaScript コードはこちら

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  confirm('ボタン「Confirm」がクリックされました！');
});

HTMLとCSSはalert()と同じです。

prompt()

テキストを入力できるウィンドウを表示

JavaScript コードはこちら

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  prompt('好きな文章を入力できます！');
});

HTMLとCSSはalert()と同じです。

【ボタン２】ボタン下にメッセージを表示させる実装方法（アコーディオン）

ボタン下にあらかじめテキストを配置しておき、ボタンのクリックで表示・非表示を切り替える。
この方法を応用し、『アコーディオンメニュー』を作ることも可能。

アコーディオン表示の仕組み

HTMLに表示内容をすべて記述しておく。隠しておきたい内容には適当なclassやidを付けておく。
付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
JavaScriptで、クリックされたときにそのclassやidを付け外しする。

「もっと見る」などのよく見るUIも、同様の方法で実装できます。

【JavaScript】「もっと見る」ボタンの実装方法（アコーディオン）

HTML / CSS / JavaScript コードはこちら

<div class="btn-container">
  <button id="btn2">ボタン２</button>
  <p id="btn2-text" class="hidden">ボタン２がクリックされました！</p>
</div>

事前に表示したいメッセージも記述しておき、クラス属性(hidden)を付けておく。

.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;
}

ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わりボタン全体が半透明になるCSS。
hiddenクラスを『display: none;』としておくことで、hiddenクラスが付いた要素は非表示になる。JavaScriptでこのクラスを付け外しすることで、表示・非表示を切り替える。

const btn2 = document.getElementById('btn2');
const btn2Text = document.getElementById('btn2-text');

btn2.addEventListener('click', () => {
  btn2Text.classList.toggle('hidden');
});

ボタンをクリックすると、テキストにhiddenクラスが付いていればhiddenクラスが外れ、付いていなければ付くようになる。
条件分岐でclassList.addとclassList.removeを使ってもOKだが、単にクラスを付け外しするだけならtoggleの方が簡単。

【ボタン３】画面中央にメッセージを表示させる実装方法（モーダルウィンドウ）

ボタンに加え、画面を暗くするためのマスクとメッセージウィンドウを用意しておき、ボタンのクリックでそれらを表示させる。
一般的に『モーダルウィンドウ』と呼ばれる方法。

モーダルウィンドウの仕組み

HTMLに、画面を暗くするマスクとメッセージウィンドウの2つのレイヤーを用意しておき、それらに適当なclassやidを付けておく。
付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
JavaScriptで、クリックされたときにそのclassやidが付け外しされるようにする。

基本的な仕組みは、先述のアコーディオン表示と同じですね。

HTML / CSS / JavaScript コードはこちら

<div class="btn-container">
  <button id="btn3">ボタン３</button>
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
  <p>ボタン３がクリックされました！</p>
</section>

画面を暗くするmaskとメッセージウィンドウであるmodalを記述しておき、それぞれにクラス属性(hidden)を付けておく。

.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;
}

ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わり、ボタン全体が半透明になるCSS。
hiddenクラスを『display: none;』としておくことで、hiddenクラスが付いた要素は非表示になる。JavaScriptでこのクラスを付け外しすることで、表示・非表示を切り替える。
#maskは『position: fixed;』とし、 top・bottom・right・leftをすべて0にすると、マスクの領域（暗い部分）が画面全体に広がる。
#modalも『position: fixed;』とし、表示位置をtop・right・leftで画面中央にくるよう調整。また、z-indexを一番大きい値（ここでは2）とすることで、メッセージウィンドウが画面の前面にくるようになる。

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');
});

ボタンをクリックすると、マスクとメッセージウィンドウからhiddenクラスが外れて画面に表示される。
マスク部分（暗い部分）をクリックすると、逆にマスクとメッセージウィンドウにhiddenクラスが追加され、非表示になる。

まとめ

以上、ボタンをクリックすることでメッセージを表示させる具体的な方法を3つ紹介しました。

本記事ではメッセージ（文字列）を出したり消したりする実装でしたが、同じ方法で画像などの要素にも対応できます。
ぜひ、ご自身で応用してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！