JavaScriptアラートボックスまたはポップアップウィンドウを作成する方法

ポップアップボックス(またはダイアログボックス)は、ユーザーに通知または警告したり、ユーザーからの入力を取得したりするために使用されるモーダルウィンドウです。

ポップアップボックスは、ポップアップが閉じられるまでユーザーがプログラムの他の側面にアクセスできないようにするため、使いすぎないようにしてください。

JavaScriptで使用されるポップアップメソッドには、window.alert()、window.confirm()、window.prompt()の3種類があります。

アラート

alertメソッドは、ユーザーが応答を入力する必要のないメッセージを表示します。この関数が呼び出されると、指定された(オプションの)メッセージを含むアラートダイアログボックスが表示されます。アラートが消える前に、ユーザーはメッセージを確認する必要があります。

例:

window.alert("Welcome to our website");

MDNアラートの例

確認

確認方法はに似てwindow.alert()いますが、ポップアップにキャンセルボタンも表示されます。ボタンはブール値を返します。OKの場合はtrue、キャンセルの場合はfalseです。

例:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
MDN確認の例

促す

プロンプトメソッドは通常、ユーザーからテキスト入力を取得するために使用されます。この関数は2つの引数を取ることができ、どちらもオプションです。ユーザーに表示するメッセージと、テキストフィールドに表示するデフォルト値です。

例:

var age = prompt('How old are you?', '100');

MDNプロンプトの例

その他の設計オプション:

デフォルトのJavaScriptポップアップに不満がある場合は、さまざまなUIライブラリで置き換えることができます。たとえば、SweetAlertは、標準のJavaScriptモーダルの優れた代替品を提供します。CDN(コンテンツ配信ネットワーク)を介してHTMLに含め、使用を開始できます。

構文は次のとおりです。 swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

上記のコードは、次のポップアップを生成します。

SweetAlertの例

SweetAlertは、標準のモーダルの唯一の代替手段ではありませんが、クリーンで実装が簡単です。

詳しくは:

  • MDN window.alert()
  • MDN window.confirm()
  • MDN window.prompt()