ons-alert-dialog

現在のスクリーンの上に表示するアラートダイアログです。ユーザに対する問いかけ、警告、エラーメッセージを表示するのに利用できます。タイトルやコンテンツやボタンは簡単にカスタマイズでき、実行しているプラットフォームに併せてスタイルが自動的に切り替わります。

実例

Alert dialogs

Alert dialogs are defined using <ons-alert-dialog> and <ons-alert-dialog-button> tags. Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

<ons-alert-dialog id="dialog-1">
  <div class="alert-dialog-title">Warning!</div>
  <div class="alert-dialog-content">
    An error has occurred!
  </div>
  <div class="alert-dialog-footer">
    <ons-alert-dialog-button>Cancel</ons-alert-dialog-button>
    <ons-alert-dialog-button>OK</ons-alert-dialog-button>
  </div>
</ons-alert-dialog>

Alert dialogs are hidden by default and usually attached as direct children of the <body> tag.

Displaying an alert dialog

To display an alert dialog you need to get a reference to the element and execute the show(options) method.

document
  .getElementById('dialog-1')
  .show();

It is hidden with the hide(options) method.

Loading from a template

Another way to use alert dialogs is with the ons.createElement(template) utility function. The dialog needs to be defined as a template (or a separate file) and the function returns a Promise that resolves to the dialog element.

<template id="dialog.html">
  <ons-alert-dialog>
    This dialog is defined as a template.
  </ons-alert-dialog>
</template>
ons
  .createElement('dialog.html', { append: true })
  .then(function(dialog) {
    dialog.show();
  });

Do not forget attaching the created dialog to the DOM. This can be done by passing append options to ons.createElement.

The “cancelable” attribute

<ons-alert-dialog> supports the cancelable attribute. This enables hiding the dialog by tapping outside of it or by pressing the back button on Android devices.

<ons-alert-dialog cancelable>
  This dialog can be cancelled!
</ons-alert-dialog>

Try adding the cancelable attribute to the dialog to see how it works.

Notification

Another way to display alert dialogs is with the ons.notification methods:

  • ons.notification.alert(options)
  • ons.notification.confirm(options)
  • ons.notification.prompt(options)

These methods all return a Promise. For the confirm it resolves to the index of the button pressed and for the prompt it resolves to the user input.

ons
  .notification.prompt({message: 'What is your name?'})
  .then(function(name) {
    ons.notification.alert('Hello ' + name);
  });

関連情報

属性

名前 型 / デフォルト値 概要
modifier String ダイアログの見た目を指定します。 Optional.
cancelable この属性を設定すると、ダイアログの背景をタップしたりAndroidデバイスのバックボタンを押すとダイアログが閉じるようになります。 Optional.
disabled この属性がある時、アラートダイアログはdisabled状態になります。 Optional.
animation String
default
ダイアログを表示する際のアニメーション名を指定します。デフォルトでは”none”か”default”が指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例:{duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
mask-color String
rgba(0, 0, 0, 0.2)
背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。 Optional.

プロパティ概要

名前 概要
disabled 無効化されている場合にtrue
cancelable そのダイアログがキャンセル可能かどうかを表します。キャンセル可能なダイアログは、背景をタップするかAndroidデバイスのバックボタンを押すことで閉じることが出来るようになります。
visible 要素が見える場合にtrue
onDeviceBackButton バックボタンハンドラ。

プリセットのmodifier

Name 概要
material マテリアルデザインのスタイル
rowfooter フッターの複数のボタンを水平に配置

メソッド

シグネチャ 概要
show([options]) ダイアログを表示します。
hide([options]) ダイアログを閉じます。
show([options]): Promise

ダイアログを表示します。

返り値: 表示される要素を解決するPromiseオブジェクトを返します。

パラメーター
名前 概要
options Object オプションを指定するオブジェクトです。
options.animation String アニメーション名を指定します。指定できるのは、”fade”, “none”のいずれかです。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
options.callback Function ダイアログが表示され終わった時に呼び出されるコールバックを指定します。
hide([options]): Promise

ダイアログを閉じます。

返り値: 隠れた要素を解決するPromiseオブジェクトを返します。

パラメーター
名前 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”fade”, “none”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
options.callback Function このダイアログが閉じた時に呼び出されるコールバックを指定します。

イベント

名前 概要
preshow アラートダイアログが表示される直前に発火します。
postshow アラートダイアログが表示された直後に発火します。
prehide アラートダイアログが隠れる直前に発火します。
posthide アラートダイアログが隠れた後に発火します。
preshow

アラートダイアログが表示される直前に発火します。

パラメーター
名前 概要
event Object Event object.
event.alertDialog Object アラートダイアログのオブジェクト。
event.cancel Function この関数を実行すると、アラートダイアログの表示を止めます。
postshow

アラートダイアログが表示された直後に発火します。

パラメーター
名前 概要
event Object Event object.
event.alertDialog Object アラートダイアログのオブジェクト。
prehide

アラートダイアログが隠れる直前に発火します。

パラメーター
名前 概要
event Object Event object.
event.alertDialog Object アラートダイアログのオブジェクト。
event.cancel Function この関数を実行すると、アラートダイアログが閉じようとするのを止めます。
posthide

アラートダイアログが隠れた後に発火します。

パラメーター
名前 概要
event Object Event object.
event.alertDialog Object アラートダイアログのオブジェクト。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。