AngularJS 1 Reference > ons-modal

ons-modal

画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、 モーダルが表示されている間はイベント通知が行われません。

実例

Modals are used to display some information on top of the app and take the focus. It forbids user interaction with the background.

Simply add the modal tags together with the page.

<ons-page>...</ons-page>

<ons-modal>
  This is a modal!
</ons-modal>

Use show, hide and toggle methods to control it.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
animation String
default 		モーダルを表示する際のアニメーション名を指定します。”none”もしくは”fade”,”lift”を指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} 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. 初期化時のみ有効

プロパティ概要

[編集]
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue。

メソッド

[編集]
シグネチャ 概要
show([options]) モーダルを表示します。
toggle([options]) モーダルの表示を切り替えます。
hide([options]) モーダルを非表示にします。
show([options]): Promise

モーダルを表示します。

返り値:

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

モーダルの表示を切り替えます。

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

モーダルを非表示にします。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “fade”のいずれかを指定します。
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.modal Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示がキャンセルされます。
postshow

モーダルが表示された直後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。
prehide

モーダルが隠れる直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの非表示がキャンセルされます。
posthide

モーダルが隠れた後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。

お困りですか?

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

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

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