JavaScriptでポップアップメッセージやウィンドウを表示させる
JavaScriptは、ウェブコンテンツを動的に表示させたり、視覚効果を高めたりすることができるスクリプト言語です。ウェブ画面を操作すると、ポップアップメッセージやウィンドウを表示させることもできます。
ここでは、実際にコードのサンプルを見ながらポップアップ表示の仕方を学びます。
ポップアップ表示の概要と活用方法
ウェブを表示していると、突然広告やメッセージなどが表示されることがあり、この機能をポップアップと言います。Javascriptは動的コンテンツに対応しており、画面遷移してポップアップメッセージやポップアップ画像を表示したり、回答を入力させたりすることができます。
ポップアップ表示は、処理の過程や結果の表示、注意の促しなど、操作性の改善や操作感の向上に役立てられます。
ポップアップメッセージの基本を学ぶ
JavaScriptは、いくつかのポップアップメッセージ機能を関数やAPI呼び出しによって実装しています。表示される部分をダイアログと呼んでおり、使用方法を学ぶことでコードの利用価値を高めることができます。
ここからは、実際に表示結果とサンプルコードを確認しながら、解説します。
alert APIを用いたポップアップの仕方
alertは、ポップアップ表示によってメッセージを伝える機能です。window.alert()、またはalert()をコールすることで、ポップアップダイアログを表示させることができます。
次のサンプルでは、"今年も暑い夏が来ましたね！"と表示させています。
実際のコードは次のように、HTMLに直接埋め込むか、.jsファイルに格納して読み込みます。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<meta charset="UTF-8">
</head>
<body>
<h1>ポップアップメッセージ</h1>
<p>テスト</p>
<script>
alert("今年も暑い夏が来ましたね！");
</script>
</body>
</html>prompt APIを用いたポップアップの仕方
promptは、ポップアップ表示によってメッセージを伝え、入力を促す機能です。window.prompt()、またはprompt()をコールすることで、ポップアップダイアログを表示させることができます。
次のサンプルでは、"何か入力してね！"と表示させています（①）。入力完了後の「OK」で入力値をウェブに表示させます（②③）。
入力した後に、「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()をコールすることで、ポップアップダイアログを表示させることができます。
次のサンプルでは、"よろしいでしょうか？"と表示させています。
「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>alert APIをクリックボタンから起動する
alert APIをクリックボタンから起動するには、に関数を定義し、alertをコールします。クリックするボタンでは、”onclick=”から定義した関数を呼び出すように記述します。「クリックボタンの表示」ボタンがクリックされると（①）、alertのポップアップダイアログが表示されます（②）。
使用したコードは、以下の通りです。
<!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>prompt APIをクリックボタンから起動する
prompt APIをクリックボタンから起動する場合も、に関数を定義し、promptをコールします。「クリックボタンの表示」ボタンがクリックされると（①）、promptのポップアップダイアログが表示されますので（②）、任意の文字を入力します（③）。
使用したコードは、以下の通りです。
<!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のポップアップダイアログが表示されます（②）。
使用したコードは、以下の通りです。
<!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>さらにポップアップ表示を活用する
これまでに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>サブウィンドウを開いてポップアップ表示する
ここではウェブ表示の際に、サブウィンドウを開いてポップアップ表示する場合を考えます。
メインウィンドウでは、「ポップアップウィンドウ」というリンクを表示します（①）。クリックすると、ポップアップウィンドウがサブウィンドウとして表示され、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
JavaScriptのポップアップ表示はシンプルな使い方から始めよう
JavaScriptのポップアップ表示は、関数やAPIなどの組み合わせで多くのことが実装できます。
今回学んだ手法の他にもモーダルなどが用意されており、動的コンテンツのための使い方は無数の組み合わせが可能と言えるでしょう。そのため、ポップアップ表示を始めるには、簡単な表示から徐々に複雑なコードに仕上げていくのが良いでしょう。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
