React Reference > ons-modal Component

<ons-modal />

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

実例

Using Modal

A modal component covers the entire screen. Underlying components are not subject to any events while the modal component is shown.

This component can be used to block user input while some operation is running or to show some information to the user.

To show or hide a modal the isOpen property is used. onShow and onHide properties can be specified to handle the related events right after the modal is shown and after the modal is hidden.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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に記載をお願いいたします。

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