JavaScript Reference > ons-modal

ons-modal

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

実例

Modals are very versatible components in Onsen UI. They can be used to display some information on top of the app and take the focus since it forbids user interaction with the background. It can also be used to show temporary pages such as input completion list.

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.

It can also contain ons-page component and anything else inside it. This way, ons-modal can be used to overlay a page without ons-navigator in a simpler way.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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.

プロパティ概要

[編集]
名前 概要
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に記載をお願いいたします。

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