javascript – アラートの「OK」ボタンと右上の「×」をキャンセルするには

JavaScriptでは、アラートダイアログには「OK」ボタンと右上の「×」ボタンがあり、どちらもキャンセルできません。これは、アラートがブラウザ側のネイティブダイアログであるため、その挙動は変更できないからです。

独自にカスタマイズさせたポップアップにしたい場合、”OK”などの確定ボタンや右上の”×”といったボタンを非表示にしたい場合は、他のポップアッププラグインを選択するか、自らカスタマイズされたポップアップを作成することを検討する必要があります。

SweetAlert2プラグインを使用した、ボタンやクローズ動作をカスタマイズできる例を以下に示します。

最初にHTMLページにSweetAlert2のCSSとJSファイルを導入する必要があります：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.js"></script>

そしてSweetAlert2のモダルフンクションを使用して、独自のカスタムモーダルを作成できます。

Swal.fire({
title: 'Custom Alert',
text: 'This is a custom alert!',
showCancelButton: false,
showCloseButton: false,
confirmButtonText: 'OK',
allowOutsideClick: false
}).then((result) => {
// 弹窗关闭后的回调函数
if (result.isConfirmed) {
// 用户点击了确认按钮
console.log('OK button clicked');
} else {
// 用户点击了取消按钮或者点击了弹窗外部
console.log('Cancel button clicked');
}
});

上記の例では、showCancelButtonとshowCloseButtonオプションは共にfalseに設定されており、これによりアラートのキャンセルボタン、および閉じるボタンが無効化されています。confirmButtonTextオプションは、決定ボタンのテキストをカスタマイズするために使用できます。allowOutsideClickオプションは、ユーザーがアラートの外側をクリックしてアラートを終了することを阻止するために使用できます。

SweetAlert2や類似のモーダルプラグインを使うことで、モーダルの挙動をより柔軟に制御することが可能で、例えばキャンセルボタンや右上の×ボタンを非表示にすることもできます。