ons-modal

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

実例

関連情報

属性

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

プロパティ概要

名前 概要
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue

メソッド概要

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

イベント概要

名前 概要
preshow モーダルが表示される直前に発火します。
postshow モーダルが表示された直後に発火します。
prehide モーダルが隠れる直前に発火します。
posthide モーダルが隠れた後に発火します。

メソッド

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

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

パラメーター
名前 概要
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に記載をお願いいたします。

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