JavaScriptを使うと、Webサイトにさまざまな動的な機能を追加できます。
そのなかでも、ポップアップはサイト訪問者の注意を引き、特定の情報を伝えるのに役立つ機能です。
JavaScriptのポップアップは、ユーザーに通知を送る、広告を表示するなど、多くの用途で使用されます。本記事で、JavaScriptでポップアップを作成する方法について確認していきましょう。
JavaScriptで作れるポップアップとは？
JavaScriptで作れるポップアップとは、Webサイトやアプリにおいて自動的に出現する小さなウィンドウのことを指します。
このウィンドウは、ユーザーの操作を促す通知やメッセージ、広告などを表示するために使用されます。
これらのポップアップはJavaScriptの簡単なコードで実装可能で、訪問者の注目を集める効果的な手段の一つです。
また、そもそもJavaScriptがどのようなプログラミング言語なのかについて知りたい方は、以下の記事を参考にしてみてください。
JavaScriptの特徴や、活用方法などについて解説しています。
JavaScriptでポップアップを作れる3つのメソッド
JavaScriptでポップアップを作れるメソッドには、以下の3つがあります。
- alert
- confirm
- prompt
これらのメソッドの特徴と使い方について見ていきましょう。
メソッド①alert
JavaScriptのalertメソッドは、ブラウザ上にポップアップを表示する最もシンプルな方法です。このメソッドを使うと、画面中央にメッセージウィンドウが出現します。
表示されたウィンドウは、ユーザーが「OK」ボタンを押すことで閉じることが可能です。
アラートは、主にユーザーに重要な情報や警告を通知する際に使用されます。ユーザーからの入力や選択を求めないため、シンプルな用途に適しています。
このコードでは、alertメソッドによって「これはアラートメッセージです」というテキストが表示されるシンプルなポップアップウィンドウが生成されます。
また、JavaScriptの導入方法から知りたい方は以下の記事を参考にしてみてください。JavaScriptを使う方法や、基本的な使い方について解説しています。
メソッド②confirm
JavaScriptのconfirmは、alertメソッドと同じくブラウザ上にポップアップウィンドウを表示するメソッドです。
alertメソッドとの違いは、「OK」ボタンのほかに「キャンセル」ボタンも表示される点です。
「OK」ボタンを押したら、戻り値としてtrueを、「キャンセル」ボタンを押したら「false」を返すため、ユーザーが選択したボタンによって処理の変更もできます。
このコードでは、confirmメソッドを使って「入力内容をキャンセルしますか？」というメッセージウィンドウが出現します。
ほかの関数と組み合わせることで、ユーザーが「OK」をクリックすると、入力内容を破棄して、「キャンセル」を選ぶと処理を行わないというような実装も可能です。
メソッド③prompt
JavaScriptのpromptは、ユーザーに入力を求めるポップアップを作成できるメソッドです。ポップアップに入力欄が追加されるのが、alertメソッドとconfirmメソッドとの違いです。
ユーザーがテキストボックスに値を入力し、「OK」か「キャンセル」を選ぶことでその値を返します。
このメソッドは、ユーザーから直接データを入力してもらう必要がある場面で利用されます。
このコードでは、promptメソッドを使用して「名前を入力してください」という入力欄付きのポップアップを作成しています。
ユーザーが名前を入力してOKボタンを押すと、入力された値の取得が可能です。
また、promptメソッドには第二引数を指定でき、第二引数に指定された値は、あらかじめ入力ボックスに表示されます。
JavaScriptでボタンのクリック後にポップアップを表示
応用として、ボタンをクリックした後にpromptメソッドを使ってポップアップを表示する仕組みを作ってみます。今回使用するコードは以下のとおりです。
<button id=”btn”>クリック</button>
const btn = document.getElementById(‘btn’);
btn.addEventListener(‘click’, function() {
prompt(‘名前を入力してください’);
});
手順ごとに見ていきましょう。
1.ボタンを作成する
まず、HTMLにbuttonタグで「クリック」という表示があるボタンを作成します。
このボタンにはid=”btn”が指定されています。JavaScriptからボタン要素を取得する際に、このid属性を使用します。
2.JavaScriptでボタンの要素を取得
次に、JavaScriptのdocument.getElementById(‘btn’)を使用して、idがbtnであるHTML要素を取得しています。
取得してきたHTML要素は、「const btn = 」で紐つけることで、変数btnの中に格納しています。
3.イベントリスナーの設定
次に、「btn.addEventListener(‘click’, function() {…})」を使って、ボタンにクリックイベントを追加します。
このメソッドは、ユーザーがボタンをクリックした際に実行する処理を定義しています。
「’click’」はイベントの種類を表しており、function()内にクリック後に実行したいコードを記述しましょう。
4.ポップアップの表示
クリックイベントが発生した際に、promptメソッドを使ってポップアップを表示させましょう。
prompt(‘名前を入力してください’);
});
「prompt(‘名前を入力してください’)」で引数に設定した「名前を入力してください」の文章が、ポップアップに表示されるメッセージになります。
このコードを実行すると、ボタンをクリックした後に、ユーザーが名前を入力できるポップアップウィンドウが出現します。
これにより、ポップアップ内で名前を入力して「OK」ボタンを押すか、「キャンセル」ボタンを押すかの選択を促すことが可能です。
JavaScriptを使わずにポップアップを表示させる方法
HTMLのpopover属性を使えば、JavaScriptを使わずに簡単にポップアップを実装できます。popover属性の基本的な使い方について見ていきましょう。
1.popover属性とid属性を付与する
対象のタグにpopover属性を設定することで、そのタグがポップオーバー要素であることを認識させられます。
続いて、同じ要素にトリガーとなる要素と紐つけるためのid属性をつけましょう。
今回は、pタグにpopover属性とid属性を付与していす。
2.popovertarget属性をつける
ポップアップにしたい要素にid属性をつけたら、トリガーとなる要素にpopovertarget属性をつけましょう。
こうすることによって、トリガーをクリックした際にポップアップウィンドウが表示されるようになります。
このとき、付与するid属性とpopovertarget属性は同じ値をつけてください。
<p id=”popover” popover>ポップアップが表示されます</p>
今回は、buttonタグに「popovertarget=”popover”」を付与しています。
ここまでできたら、popovertarget属性をつけたbuttonタグをクリックしてみましょう。pタグがポップアップとして開きます。
開いたポップアップは、要素の外側をクリックすることで閉じることが可能です。
また、popover属性には、以下の属性値を使用できます。
| 属性値 | 説明 |
| auto | このポップオーバーを開いたら、ほかのポップオーバーを閉じる。popover属性の初期値。 |
| manual | このポップオーバーを開いても、ほかのポップオーバーは閉じない。 |
3.CSSで見た目を整える
ポップアップの初期デザインは、CSSで自由に見た目を変更できます。
例えば、上の画像のデザインにするには、以下のコードを入れます。
padding: 20px; /* 領域の余白調整 */
background: #498fac; /* 背景色の変更 */
color: #fff; /* 文字色の変更 */
font-weight: bold; /* 太字の設定 */
letter-spacing: 2px; /* 文字間の変更 */
}
サイトの雰囲気に合わせて、CSSを適宜追加しましょう。
JavaScriptは独学でも習得できる？
JavaScriptは独学でも十分に習得可能なプログラミング言語です。
JavaScriptには豊富な書籍や、オンラインツールが揃っており、初心者でも独学で学習できる環境が整っています。
また、エディターとブラウザさえあれば学習を始められるできるため、特別な環境を構築する必要がないのも独学に適している理由の一つです。
実際にプログラムを作成し、試行錯誤しながら学ぶことでJavaScriptのスキルを向上させられるでしょう。
しかし、効率的に学習するなら、スクールや講座を活用するのもおすすめです。
自分に合った方法で、JavaScriptの学習を行いましょう。
JavaScriptでポップアップを表示させる方法のまとめ
今回は、JavaScriptを使ってポップアップを表示させるメソッドであるalert、confirm、promptについて紹介しました。
これらのメソッドはシンプルなコードで書けるので、初心者でも簡単にポップアップを実装できるでしょう。
また、これらのメソッドを応用することで、ボタンがクリックされた際に、ポップアップを出現させたり、入力された値を画面上に反映させたりもできます。
ぜひポップアップを導入して、インタラクティブなサイト作りにチャレンジしてみてください。
