JavaScriptでポップアップメッセージやウィンドウの表示方法

言語・開発

プログラミング言語

JavaScript

アンドエンジニア編集部

2024.06.24

この記事でわかること

JavaScriptは、ポップアップメッセージ機能を関数やAPI呼び出しによって実装しています

alertやprompt、confirmが代表的なAPIで、簡単にウェブコンテンツの表示に利用できます

関数やAPIを組み合わせて多くの処理に対応可能で、徐々にコードを追加するのがおすすめです

Facebook

LINE

Hatena

JavaScriptでポップアップメッセージやウィンドウを表示させる

JavaScriptは、ウェブコンテンツを動的に表示させたり、視覚効果を高めたりすることができるスクリプト言語です。ウェブ画面を操作すると、ポップアップメッセージやウィンドウを表示させることもできます。

ここでは、実際にコードのサンプルを見ながらポップアップ表示の仕方を学びます。

【参考】：MDM Docs: JavaScript とは

JavaScriptの入門！その概要や文法の基礎について解説！

ポップアップ表示の概要と活用方法

ウェブを表示していると、突然広告やメッセージなどが表示されることがあり、この機能をポップアップと言います。Javascriptは動的コンテンツに対応しており、画面遷移してポップアップメッセージやポップアップ画像を表示したり、回答を入力させたりすることができます。

ポップアップ表示は、処理の過程や結果の表示、注意の促しなど、操作性の改善や操作感の向上に役立てられます。

ポップアップメッセージの基本を学ぶ

JavaScriptは、いくつかのポップアップメッセージ機能を関数やAPI呼び出しによって実装しています。表示される部分をダイアログと呼んでおり、使用方法を学ぶことでコードの利用価値を高めることができます。

ここからは、実際に表示結果とサンプルコードを確認しながら、解説します。

alert APIを用いたポップアップの仕方

alertは、ポップアップ表示によってメッセージを伝える機能です。window.alert()、またはalert()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"今年も暑い夏が来ましたね！"と表示させています。

　【図】：alert APIを用いたポップアップ

実際のコードは次のように、HTMLに直接埋め込むか、.jsファイルに格納して読み込みます。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      alert("今年も暑い夏が来ましたね！");
   </script>
</body>
</html>

【参考】：MDM Docs: window.alert

prompt APIを用いたポップアップの仕方

promptは、ポップアップ表示によってメッセージを伝え、入力を促す機能です。window.prompt()、またはprompt()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"何か入力してね！"と表示させています（①）。入力完了後の「OK」で入力値をウェブに表示させます（②③）。

　【図】：prompt APIを用いたポップアップ

入力した後に、「OK」の場合はその値が返り、「キャンセル」の場合は”null”が返ります。実際のコードは次のように、記述します。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      ret=window.prompt("何か入力してね！");
      document.write(ret);
   </script>
</body>
</html>

【参考】：MDM Docs: Window.prompt()

confirm APIを用いたポップアップの仕方

confirmは、ポップアップ表示によって「OK」「キャンセル」の結果を受け取る機能です。window.confirm()、またはconfirm()をコールすることで、ポップアップダイアログを表示させることができます。

次のサンプルでは、"よろしいでしょうか？"と表示させています。

　【図】：confirm APIを用いたポップアップ

「OK」をクリックするとtrueが戻り（①）、「キャンセル」をクリックするとfalseが戻ります（②）。実際のコードは次の通りです。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <script>
      ret=window.confirm("よろしいでしょうか？");
      document.write(ret);
   </script>
</body>
</html>

【参考】：MDM Docs: window.confirm

alert APIをクリックボタンから起動する

alert APIをクリックボタンから起動するには、に関数を定義し、alertをコールします。クリックするボタンでは、”onclick=”から定義した関数を呼び出すように記述します。「クリックボタンの表示」ボタンがクリックされると（①）、alertのポップアップダイアログが表示されます（②）。

　【図】：alert APIをクリックボタンから起動する

使用したコードは、以下の通りです。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function onClick() {
         alert("クリックしたの？");
      }
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <button onclick="onClick()">クリックボタンの表示</button>
</body>
</html>

【参考】：MDM Docs: window.alert

prompt APIをクリックボタンから起動する

prompt APIをクリックボタンから起動する場合も、に関数を定義し、promptをコールします。「クリックボタンの表示」ボタンがクリックされると（①）、promptのポップアップダイアログが表示されますので（②）、任意の文字を入力します（③）。

　【図】： prompt APIをクリックボタンから起動する

使用したコードは、以下の通りです。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function onClick() {
         ret=window.prompt("何か入力してね！");
         document.write(ret);
      }
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <button onclick="onClick()">クリックボタンの表示</button>
</body>
</html>

【参考】：MDM Docs: Window.prompt()

confirm APIをクリックボタンから起動する

confirm APIもalertやpromptと同様の使い方です。これまでのAPI同様に、”onclick=”から定義した関数を呼び出すように記述します。「クリックボタンの表示」ボタンがクリックされると（①）、confirmのポップアップダイアログが表示されます（②）。

　【図】：confirm APIをクリックボタンから起動する

使用したコードは、以下の通りです。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function onClick() {
         ret=window.confirm("よろしいでしょうか？");
         document.write(ret);
      }
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト</p>
   <button onclick="onClick()">クリックボタンの表示</button>
</body>
</html>

【参考】：MDM Docs: window.confirm

さらにポップアップ表示を活用する

これまでにalert、prompt、confirmの基本的なポップアップ表示機能を学びました。ここからは、もう少し機能を追加していき、使い勝手の良いコードに仕上げていきます。具体的には、タイマーの追加、サブウィンドウの表示方法について学びます。

ポップアップ表示にタイマーを設定する

ウェブ画面にタイマーを設定すると、一定時間操作がない場合に、ポップアップダイアログの表示やウィンドウを自動で開く・閉じるなどの追加処理が可能となります。

ここでは、10秒後にalertのポップアップダイアログを表示させる例を取り上げます。具体的には、画面表示後10秒経過したらsetTimeout()でalertを設定する関数をコールしています。

　【図】：ポップアップ表示にタイマーを設定する

実際のコードは次の通りで、promptやconfirmに置き換えることもできます。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script>
      function showAlart() {
         alert("時間が過ぎたよ！");
      }
      window.onload = function() {
         setTimeout(showAlart, 10000);
      };
   </script>
</head>
<body>
   <h1>ポップアップメッセージ</h1>
   <p>テスト：10秒間待ってくださいね</p>
</body>
</html>

【参考】：MDM Docs: setTimeout()

サブウィンドウを開いてポップアップ表示する

ここではウェブ表示の際に、サブウィンドウを開いてポップアップ表示する場合を考えます。

メインウィンドウでは、「ポップアップウィンドウ」というリンクを表示します（①）。クリックすると、ポップアップウィンドウがサブウィンドウとして表示され、10秒後にタイマーによって閉じる例です（②）。

　【図】：サブウィンドウを開いてポップアップ表示する

サブウィンドウを開くには、window.open()で表示させるURLを指定するだけです。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script type="text/javascript">
      function new_open(url){
         window.open(url, "new_window", "width=500,height=300,scrollbars=yes");
      }
   </script>
</head>
<body>
   <h1>ポップアップメインウィンドウ</h1>
   <p>テスト</p>
   <p><a href="sub_window.html" target="new_window" onClick="new_open('sub_window.html')">
      ポップアップウィンドウ</a></p>
</body>
</html>

サブウィンドウのコードでは、setTimeout()で指定した時間（ここでは10秒）経過後にwindow.close()をコールします。

<!DOCTYPE html>
<html>
<head>
   <title>タイトル</title>
   <meta charset="UTF-8">
   <script type="text/javascript">
      function sub_window_close(){
         window.close(); ;
      }
   </script>
</head>
<body onLoad="setTimeout('sub_window_close()', 10000)">
   <h1>ポップアップサブウィンドウ</h1>
   <p>テスト：10秒間待ってくださいね</p>
</body>
</html>

【参考】：MDM Docs: Window: open() メソッド【参考】：MDM Docs: window.close