• HOME > 
  • Javascript > 
  • jQueryのalertの使い方【confirmやpromp...

jQueryのalertの使い方【confirmやpromptとの違い】

投稿日:

jQueryでアラートを表示させるには?

jQueryを使うとユーザーが特定の操作をした時にアラートダイアログを開くように操作することができます。(正確にはJavascriptのメソッドなので、jQueryを読み込まなくても動作します。)

開かれたアラートダイアログは閉じられるまでの間、ユーザーにページ内でスクロールやクリックといった他の操作をできなくさせる機能を持っています。

警告や確認などユーザーに必ず目を通して欲しい情報を表示する際に使用します。

アラートダイアログを開くメソッドには、「alert()」「confirm()」「prompt()」の3つがあります。

それぞれの以下のように異なる機能を持っています。

alert()OKボタンが付いたメッセージを表示する
confirm()キャンセルができる確認メッセージを表示する
prompt()入力テキストボックスを表示する

ここからは各メソッドの特徴と使い方について説明していきます。

alert()メソッドの使い方

alert()メソッドは、OKボタンだけが付いたアラートダイアログを表示させることができるメソッドです。

ただしalert()メソッドはメッセージを表示するだけで、キャンセル処理を実行することはできません

メールフォームの送信完了のメッセージ等、ユーザーに情報を伝えたい時に使われます。

次の例では、ボタンをクリックすると指定したテキストがアラートダイアログに表示されます。

HTML

<button id="btn1" class="btn">クリックしてください1</button>

jQuery

$("#btn1").on("click",function(){
    alert("ボタンがクリックされました。");
});

プレビュー

ここではクリックをきっかけにアラートを表示するように作りましたが、ページ読み込み時やスクロール時などに表示させることも出来ます。

confirm()メソッドの使い方

confirm()メソッドは、OKボタンとキャンセルボタンの付いたアラートダイアログを表示させることができるメソッドです。

alertメソッドとは異なり、OKボタンが押された時とキャンセルボタンが押された時の処理それぞれ設定することが可能です。

ユーザーに確認を取ってから処理を実行させたい場合に使用されます。

confirmは下記のようにif文を使ってテキストや処理を設定します。

confirm()メソッドの書き方

次の例では、OKを押すとボタンの色がオレンジに変わり、キャンセルを押すと緑色に変わります。

HTML

<button id="btn2" class="btn">クリックしてください2</button>

CSS

.btn.active{
    background:#d43300;
}
.btn.active2{
    background:#00dd44;
}

jQuery

$("#btn2").on("click",function(){
    if(confirm("このボタンの色を変更しますか?")){
        $(this).toggleClass("active");
    }else{
        $(this).toggleClass("active2");
        return false;
    }
});

プレビュー

prompt()メソッドの使い方

prompt()メソッドは、テキスト入力ボックスが付いたアラートダイアログを表示し、ユーザーがそこに入力した値を取得することができるメソッドです。

下の例ではpromptによって入力された値をtext()メソッドを使ってで画面に表示させています。

HTML

<button id="btn3" class="btn">クリックしてください3</button>

jQuery

$("#btn3").on("click",function(){
    var input = prompt("出身地はどこですか?");
    $(".result span").text(input);
});

プレビュー

あなたの出身地は「」です。

ダイアログやモーダルウィンドウを使うには?

上記のメソッドのメッセージボックスはブラウザごとにデザインが固定されているためカスタマイズができません。自由なデザインで、さらに複雑な機能を持たせたウィンドウを使いたい場合は、ライブラリを利用するか一から自作を行います。

画像をポップアップウィンドウで表示したり、フォーム機能を持たせたウィンドウを作成することが可能です。

リンク先のサムネイル
jQueryUIでモーダルウィンドウを作る方法

開いたウィンドウとページの間にはフィルターが掛かり、ユーザーがそのウィンドウを閉じるまでスクロールなどページ内の他の操作をできなくする機能を持ったモーダルウィンドウをライブラリを使わずにjQueryだけで自作する方法をわかりやすく説明します...【もっと読む】

jQueryのライブラリであるjQueryUIを導入すれば、リッチなデザインのダイアログボックスを簡単なコードだけで使用することができます。

リンク先のサムネイル
jQueryUIのダイアログボックスの使い方

jQueryUIを使えば、リッチなデザインと機能を持つダイアログを手軽にサイトに実装することが可能です。jQueryUIのdialogはダイアログの開閉をはじめ、モーダル設定やドラッグの可否など細かい設定も用意されており、カスタマイズ性も高く使いやすいです...【もっと読む】

まとめ

このようにalertメソッドを使えば簡単にメッセージを表示することが可能です。なおデザインはブラウザごとに違うため。自由にデザインをカスタマイズしたり、ボタンを増やすなどしたい場合はjQueryUIなどでダイアログボックスを作るというように状況に応じて使い分けると良いかもしれません。

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。