JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】「はい」「いいえ」「キャンセル」の3ボタン付きアラートダイアログを自作する方法

標準のJavaScriptアラートボックス（alert()）は、デザインやボタンの構成をカスタマイズできません。「はい」「いいえ」「キャンセル」のように複数のボタンを持つ確認ダイアログを表示したい場合は、jQueryとCSSを組み合わせてカスタムアラートボックスを自作しましょう。

実装のポイント

  • ダイアログ本体（メッセージ欄＋3つのボタン）をHTMLで事前にマークアップしておく
  • CSSで初期状態を非表示（display:none）にし、必要なときだけjQueryで表示・非表示を切り替える
  • 各ボタンのclickイベントに任意のコールバック関数をバインドし、クリック後はダイアログを閉じる

サンプルコード

以下のコードを実行して「送信」ボタンを押すと、3つのボタンを持つアラートボックスが表示されます。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      function functionConfirm(msg, myYes, myNo, cancel) {
        var confirmBox = $("#confirm");
        confirmBox.find(".message").text(msg);
        confirmBox.find(".yes,.no,.cancel").unbind().click(function() {
          confirmBox.hide();
        });
        confirmBox.find(".yes").click(myYes);
        confirmBox.find(".no").click(myNo);
        confirmBox.find(".cancel").click(cancel);
        confirmBox.show();
      }
    </script>
    <style>
      #confirm {
        display: none;
        background-color: #91FF00;
        border: 1px solid #aaa;
        position: fixed;
        width: 250px;
        left: 50%;
        margin-left: -125px;
        padding: 6px 8px 8px;
        box-sizing: border-box;
        text-align: center;
      }
      #confirm button {
        background-color: #48E5DA;
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #aaa;
        padding: 5px;
        text-align: center;
        width: 80px;
        cursor: pointer;
      }
      #confirm .message {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div id="confirm">
      <div class="message"></div>
      <button class="yes">はい</button>
      <button class="no">いいえ</button>
      <button class="cancel">キャンセル</button>
    </div>
    <button onclick='functionConfirm("サッカーは好きですか？", function yes() {
      alert("「はい」が選択されました")
    }, function no() {
      alert("「いいえ」が選択されました")
    }, function cancel() {
      alert("「キャンセル」が選択されました")
    });'>送信</button>
  </body>
</html>

コードの解説

JavaScript（functionConfirm関数）

functionConfirm()は、表示するメッセージと、各ボタンが押されたときに実行するコールバック関数を引数として受け取ります。まず.unbind()で以前に登録されたイベントを解除してから新しい処理をバインドしているため、関数を何度呼び出してもイベントが重複することありません。いずれかのボタンがクリックされるとダイアログが非表示になり、続いて対応するコールバック関数が実行されます。

CSS

#confirmはposition: fixedによって画面中央付近に固定され、通常時はdisplay: noneで隠れています。ボタンには角丸・背景色・カーソル指定などを施し、押しやすい見た目にしています。配色や幅はプロジェクトに合わせて自由に変更できます。

補足：より現代的な実装方法

近年では、HTML標準の<dialog>要素や、SweetAlert2のようなPromiseベースのモーダルライブラリを使えば、より少ないコードで同様のUIを実現できます。ただし、ダイアログの表示制御やイベント管理の仕組みを理解するうえで、jQueryによる自作はとても良い学習になります。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini