AngularJS 1 Reference > ons-alert-dialog

ons-alert-dialog

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

実例

Dialogs

Dialogs are defined using the <ons-dialog>, <ons-alert-dialog> and <ons-toast> tags.

<ons-dialog var="dialog">
  This is a dialog!
</ons-dialog>

var attribute is used to store the dialog in a variable for later access.

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>
  <div class="alert-dialog-title">Warning!</div>
  <div class="alert-dialog-content">
    An error has occurred!
  </div>
  <div class="alert-dialog-footer">
    <button class="alert-dialog-button">Cancel</button>
    <button class="alert-dialog-button">OK</button>
  </div>
</ons-alert-dialog>

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

Displaying a dialog

To display a dialog you need to get a reference to the element and execute the show(options) method. It is hidden with the hide(options) method.

Loading from a template

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

<template id="dialog.html">
  <ons-dialog>
    This dialog is defined as a template.
  </ons-dialog>
</template>

ons
  .createElement('dialog.html', { append: true })
  .then(function(dialog) {
    dialog.show();
  });

For AngularJS, an extra parameter can be passed to specify the scope of the new popover: ons.createElement('dialog.html', { parentScope: $scope });

The cancelable attribute

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

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

Try adding the cancelable attribute to one of the dialogs to see how it works.

Notification

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

  • ons.notification.alert(options)
  • ons.notification.confirm(options)
  • ons.notification.prompt(options)
  • ons.notification.toast(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.
visible Boolean 要素が見える場合にtrue。 Optional.
var String このアラートダイアログを参照するための名前を指定します。 Optional. 初期化時のみ有効
ons-preshow Expression “preshow”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-prehide Expression “prehide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-postshow Expression “postshow”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-posthide Expression “posthide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-destroy Expression “destroy”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効

プロパティ概要

[編集]
名前 概要
disabled 無効化されている場合にtrue。
cancelable そのダイアログがキャンセル可能かどうかを表します。キャンセル可能なダイアログは、背景をタップするかAndroidデバイスのバックボタンを押すことで閉じることが出来るようになります。
maskColor 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。
visible 要素が見える場合にtrue。
onDeviceBackButton バックボタンハンドラ。
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}

プリセットのmodifier

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

メソッド

[編集]
シグネチャ 概要
show([options]) ダイアログを表示します。
hide([options]) ダイアログを閉じます。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしlistenerパラメータが指定されなかった場合、そのイベントのリスナーが全て削除されます。
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 このダイアログが閉じた時に呼び出されるコールバックを指定します。
on(eventName, listener)

イベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火された際に呼び出されるコールバックを指定します。
once(eventName, listener)

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出されるコールバックを指定します。
off(eventName, [listener])

イベントリスナーを削除します。もしlistenerパラメータが指定されなかった場合、そのイベントのリスナーが全て削除されます。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーの関数オブジェクトを渡します。

イベント

[編集]
名前 概要
preshow アラートダイアログが表示される直前に発火します。
postshow アラートダイアログが表示された直後に発火します。
prehide アラートダイアログが隠れる直前に発火します。
posthide アラートダイアログが隠れた後に発火します。
dialogcancel Fired when the dialog is canceled. （翻訳中）
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 アラートダイアログのオブジェクト。
dialogcancel

Fired when the dialog is canceled. （翻訳中）

パラメーター
名前 型 概要

お困りですか?

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

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

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