jQuery UI/Bootstrap/SweetAlert2でさらに便利に

2024-04-17

JavaScript で「OK」と「キャンセル」ボタン付きのダイアログを作成する方法

方法1： alert() と confirm() を使う

この方法はシンプルでわかりやすいですが、高度なカスタマイズには向きません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダイアログ例</title>
</head>
<body>
  <script>
    // ダイアログを表示
    var result = confirm("この操作を実行しますか？");

    // 結果に応じて処理を行う
    if (result) {
      alert("処理を実行しました。");
    } else {
      alert("処理をキャンセルしました。");
    }
  </script>
</body>
</html>

方法2：カスタムダイアログを作成する

この方法は、より高度なカスタマイズが可能で、モーダルダイアログなど様々な種類のダイアログを作成できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダイアログ例</title>
  <style>
    /* ダイアログのスタイル */
    #dialog {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="dialog">
    <h2>確認</h2>
    <p>この操作を実行しますか？</p>
    <button id="okBtn">OK</button>
    <button id="cancelBtn">キャンセル</button>
  </div>

  <script>
    // ダイアログ要素を取得
    const dialog = document.getElementById('dialog');
    const okBtn = document.getElementById('okBtn');
    const cancelBtn = document.getElementById('cancelBtn');

    // ダイアログを表示
    function showDialog() {
      dialog.style.display = 'block';
    }

    // ダイアログを閉じる
    function closeDialog() {
      dialog.style.display = 'none';
    }

    // OK ボタンをクリックしたときの処理
    okBtn.addEventListener('click', () => {
      alert("処理を実行しました。");
      closeDialog();
    });

    // キャンセルボタンをクリックしたときの処理
    cancelBtn.addEventListener('click', closeDialog);

    // ダイアログを表示する例
    showDialog();
  </script>
</body>
</html>

上記はあくまで基本的な例です。必要に応じて、スタイルや機能を拡張することができます。

方法 1： alert() と confirm() を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダイアログ例</title>
</head>
<body>
  <script>
    // ダイアログを表示
    var result = confirm("この操作を実行しますか？");

    // 結果に応じて処理を行う
    if (result) {
      alert("処理を実行しました。");
    } else {
      alert("処理をキャンセルしました。");
    }
  </script>
</body>
</html>

このコードは、confirm() 関数を使ってダイアログを表示します。ダイアログには、「この操作を実行しますか？」というメッセージが表示されます。ユーザーが「OK」ボタンをクリックすると true が返され、「キャンセル」ボタンをクリックすると false が返されます。

result 変数には、ダイアログの結果が格納されます。この変数の値を使って、処理を分岐させることができます。

方法 2：カスタムダイアログを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダイアログ例</title>
  <style>
    /* ダイアログのスタイル */
    #dialog {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="dialog">
    <h2>確認</h2>
    <p>この操作を実行しますか？</p>
    <button id="okBtn">OK</button>
    <button id="cancelBtn">キャンセル</button>
  </div>

  <script>
    // ダイアログ要素を取得
    const dialog = document.getElementById('dialog');
    const okBtn = document.getElementById('okBtn');
    const cancelBtn = document.getElementById('cancelBtn');

    // ダイアログを表示
    function showDialog() {
      dialog.style.display = 'block';
    }

    // ダイアログを閉じる
    function closeDialog() {
      dialog.style.display = 'none';
    }

    // OK ボタンをクリックしたときの処理
    okBtn.addEventListener('click', () => {
      alert("処理を実行しました。");
      closeDialog();
    });

    // キャンセルボタンをクリックしたときの処理
    cancelBtn.addEventListener('click', closeDialog);

    // ダイアログを表示する例
    showDialog();
  </script>
</body>
</html>

このコードは、HTML、CSS、JavaScript を使ってカスタムダイアログを作成します。ダイアログには、「この操作を実行しますか？」というメッセージと、「OK」と「キャンセル」ボタンが表示されます。

showDialog() 関数は、ダイアログを表示します。
okBtn の click イベントリスナーは、ユーザーが「OK」ボタンをクリックしたときに処理を実行します。

補足

上記のコードはあくまで例であり、状況に合わせて変更する必要があります。
ダイアログのデザインや機能をカスタマイズするには、CSS と JavaScript を使用する必要があります。
より高度なダイアログを作成するには、ライブラリを使用することもできます。

JavaScript でダイアログを作成するその他の方法

jQuery UI ダイアログを使用する:

長所:
- 使いやすく、包括的な機能を備えた人気のあるライブラリ
- 様々なスタイルとオプションを提供
- イベントハンドリングとアニメーションを容易にする
短所:
- 追加のライブラリをロードする必要がある
- コード量が増加する
- プロジェクトによっては不要な機能が含まれている可能性がある

Bootstrap モーダルを使用する:

長所:
- 人気のある CSS フレームワークの一部であるため、多くの開発者に馴染みがある
- 応答性の高いモーダルダイアログを簡単に作成できる
- その他の Bootstrap コンポーネントと簡単に統合できる
短所:
- 他のライブラリほど機能が豊富ではない

sweetAlert2: https://sweetalert2.github.io/ のようなライブラリを使用する:

長所:
- モダンで洗練されたダイアログデザインを提供
- 様々なカスタマイズオプション
- Promise API を使用して非同期処理を容易にする
短所:
- 比較的新しいライブラリであり、jQuery UI や Bootstrap ほど普及していない

完全なカスタムダイアログを構築する:

長所:
- 完全な制御と柔軟性
- ニーズに特化したダイアログを設計できる
短所:
- 開発とメンテナンスに時間がかかる
- コードが複雑になる可能性がある
- UI/UX のベストプラクティスを実装する必要がある

最適な方法の選択:

最適な方法は、特定のニーズと要件によって異なります。単純なダイアログの場合は、alert() または confirm() 関数で十分かもしれません。より多くの機能とカスタマイズ性を必要とする場合は、jQuery UI ダイアログ、Bootstrap モーダル、または sweetAlert2 などのライブラリを使用することを検討してください。完全な制御が必要な場合は、独自のカスタムダイアログを構築することを検討してください。

どの方法を選択する場合でも、ユーザーエクスペリエンスを考慮することが重要です。ダイアログは、ユーザーにとってわかりやすく使いやすいものでなければなりません。

javascript dialog