JavaScriptを使用した確認ボックスの作成方法

基本的な確認ボックス: 以下のコードは、シンプルな確認ボックスを作成する方法です。

if (confirm("本当にこの操作を実行しますか？")) {
  // ユーザーが「OK」を選択した場合の処理
} else {
  // ユーザーが「キャンセル」を選択した場合の処理
}

このコードでは、confirm関数を使用して確認ボックスを表示し、ユーザーが「OK」または「キャンセル」を選択するまで処理が一時停止します。ユーザーが「OK」を選択した場合には、処理を続行します。ユーザーが「キャンセル」を選択した場合には、処理を中止するか、別の処理を実行します。

カスタマイズされた確認ボックス: confirm関数はデフォルトのスタイルを持っていますが、外観をカスタマイズすることもできます。以下のコードは、カスタムスタイルを持つ確認ボックスを作成する方法です。

HTML:

<button onclick="showConfirmation()">操作を実行</button>
<div id="confirmationBox" style="display: none;">
  <p>本当にこの操作を実行しますか？</p>
  <button onclick="confirmAction()">はい</button>
  <button onclick="cancelAction()">キャンセル</button>
</div>

JavaScript:

function showConfirmation() {
  document.getElementById("confirmationBox").style.display = "block";
}
function confirmAction() {
  // 実行する処理
  document.getElementById("confirmationBox").style.display = "none";
}
function cancelAction() {
  // キャンセル時の処理
  document.getElementById("confirmationBox").style.display = "none";
}

このコードでは、ボタンをクリックすると、非表示に設定された確認ボックスが表示されます。ユーザーが「はい」をクリックすると処理が実行され、ユーザーが「キャンセル」をクリックすると処理が中止されます。

これらはJavaScriptを使用した確認ボックスのいくつかの例です。ウェブ開発での使用法として、ユーザーに確認を促すために利用されます。自分のプロジェクトに適した方法を選択し、必要に応じてカスタマイズしてください。