jQueryでアラートを表示しよう!

jQueryでアラートを表示しよう!

JavaScriptのalert(), confirm()でアラートを表示できます。

jQuery UIのダイアログを使用することで、より洗練されたアラートを実装可能です。

アラートを表示するには?

alert('アラートです');

アラートを表示するには、JavaScriptのalert()に文字列を渡します。

アラートを改行するには?

alert('アラートです\n改行しました');

アラートを改行するには、文字列の中で\nを使います。

半角で入力することに注意しましょう。

アラートのキャンセルはできる?

if(confirm('キャンセルできます')) {
    alert('確認しました');
}

alert()の代わりにconfirm()に文字列を渡し、キャンセル可能なアラートを表示します。

OKが押された場合はtrue, キャンセルが押された場合はfalseを返します。

サンプルでは、OKが押された場合にアラートを表示しています。

アラートで変数を使うには?

let message = '変数です';

alert(message);
confirm(message);

引数に変数を渡せば、アラートにその文字列が使用されます。

confirm()でも同様です。

jQuery UIのダイアログでアラートを表示しよう!

alert(), confirm()は簡単で便利なメソッドですが、機能が少ないです。

デザインやタイトルの変更を行いたい場合は、jQuery UIのダイアログを使用しましょう。

// CSS
#dialog {
    display: none;
}
// HTML
<div id="dialog" title="タイトル">
    <span>アラートです</span>
</div>
$('#dialog').dialog();

title属性と本文を含んだdiv要素で.dialog()を実行し、アラートを表示します。

デフォルトでアラートが表示されないように、display: none;でdiv要素を非表示にしています。

OK, キャンセルボタンを追加するには?

$('#dialog').dialog({
    buttons: {
        'OK': function() {
            alert('確認しました');

            $(this).dialog("close");
        },
        'キャンセル': function() {
            $(this).dialog( "close" );
        }
    }
});

.dialog()には、オブジェクトでオプションを渡すことができます。

buttonsオプションに、ボタン名をプロパティ、クリックで実行する関数を値とするオブジェクトを渡すことで、アラートにボタンを追加できます。

サンプルでは、OKをクリックするとalert()を実行し、各ボタンのクリックでアラートを閉じます。

alert()の部分を変更することで、必要な処理を実行できます。

デザインを変更するには?

デザインを変更するには、jQuery UIのテーマを変更します。

タイトル、ボタン、コンテンツの背景色、文字色が変更されます。

タイトルを変更するには?

$('#dialog').dialog({
    title: 'タイトルを変更しました'
});

タイトルを変更するには、titleオプションに変更するタイトルを入力します。

アラートのプラグインはあるの?

jQuery UIの機能やデザインに不満がある場合は、プラグインを使用しましょう。

jQuery alert Plugins | jQuery Script

英語ですが、100件前後のアラートプラグインが登録されています。

まとめ

  • jQueryでアラートを表示するには、alert()を使用します。
  • アラートを改行するには、’\n’を入力します。
  • キャンセルできるアラートを表示するには、confirm()を使用します。
  • alert(), confirm()の引数は文字列変数で渡せます。
  • jQuery UIでアラートを表示するには、.dialog()を使用します。
  • OK, キャンセルボタンはbuttonsオプションで追加します。
  • デザインを変更するには、jQuery UIのテーマを変更します。
  • jQuery UIのダイアログに不満がある場合は、プラグインを使用しましょう。

実践カテゴリの最新記事

アラートです