アラートダイアログのOKが押されたタイミングで処理を実行する

2023年9月7日追記

以下長々書いていますが、alertダイアログが表示されている間は、その後のJavaScriptの実行はブロックされるため、

console.log("Before alert");
alert("OKを押してください。");
console.log("After alert");

のようにalertのあとに、実行したい処理を書けばいいだけでした。。。

やりたいこと

上の画像のようなアラートダイアログのOKを押されたタイミングで処理を実行したいとします。

一般的には、上の画像のような確認ダイアログを使って、OKボタンが押された場合とキャンセルボタンが押された場合の処理を書くことが多いかと思います。

if (confirm('確認ダイアログの例')) {
    console.log('OKボタンが押されました。')
} else {
    console.log('キャンセルボタンが押されました。')
}

キャンセルボタンの押せない、OKボタンのみの確認ダイアログを作りたい

ただ、時には諸々の事情でキャンセルボタンを押してもらいたくない場合もあります。

ということで、キャンセルボタンの押せない、OKボタンのみの確認ダイアログを作っていきます。

alert()の仕様

確認ダイアログでのOKボタンとキャンセルボタンを押された場合の処理の書き分けでは、JavaScriptのconfirm()が

• OKボタンをクリックした場合の戻り値：true
• キャンセルボタンをクリックした場合の戻り値：false

であることを使って、if文の条件式の中でconfirm()を使うことで実現していました。

一方、alert()では、アラートダイアログのOKボタンを押された際の戻り値はundefinedです。

この特性を使って、

if (!alert('OKを押してください。')) {
    // OKが押された際に実行する処理
}

上記のような条件式を書くことによって、OKが押された際にundefinedの否定、つまりtrueとなり、処理が実行されます。

以下、サンプルです。

サンプル

See the Pen Event After Alert by Kamiyama (@MtDeity) on CodePen.