確認ウインドウを表示する

最終更新日：2023-05-24
公開日：2020-05-12

ブラウザの確認ウインドウを表示する方法と、ボタンを押したあとの処理の分岐について解説します。

この記事のポイント

閲覧者に回答を選んでもらうウインドウを表示する
選択によって処理を分ける

ポップアップで確認メッセージを表示する

ページの閲覧者に簡単な確認をしたいとき、confirmメソッドを使うとポップアップ形式で表示することができます。

confirmメソッドは次のようにテキストを渡して表示します。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Test Script</title>
  <script>
    window.addEventListener('load', (event) => {
      confirm("今日は雨ですか？");
    });
  </script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

メッセージとして渡すテキストはHTMLタグを使用できないため、メッセージの改行したいときは改行コード（\n）を使います。
リンクや画像は表示することができません。

また、confirmメソッドは「OK」を選択するとtrue、キャンセルを選択するとfalseを返します。
この返り値を利用して、次のように選択によって処理を分けることができます。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Test Script</title>
  <script>
    window.addEventListener('load', (event) => {
      if( confirm("今日は\n雨ですか？") ) {
        console.log("早く止みますように。");
      } else {
        console.log("良い天気ですね");
      }
    });
  </script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>

このコードでは「OK」を選択するとconsole.logメソッドで「早く止みますように。」と出力され、「キャンセル」を選択すると「良い天気ですね」と出力されます。

記事一覧

ポップアップで確認メッセージを表示する

JavaScript コード例

JavaScript コード例

関連記事