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

ボタンを押したらメッセージが表示される3つの方法

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

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

目次

実装例とコード

画面にアラートを表示。

実装方法はこちら

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

実装方法はこちら

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

実装方法はこちら

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

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

alert()について

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


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

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

アコーディオン表示の仕組み
  1. HTMLに表示内容をすべて記述しておく。隠しておきたい内容には適当なclassやidを付けておく。
  2. 付けたclassやidに対し、CSSで「display: none;」を記述して表示を隠す。
  3. JavaScriptで、クリックされたときにそのclassやidを付け外しする。

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

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

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

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

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

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次