モーダルとは

モーダルは、ページの上に表示されるポップアップウィンドウです。

定期購読や購入のようなユーザーアクションのためのウィンドウ、画像の拡大表示、サイドバー、ハンバーガーメニューなど、様々な用途で利用できます。これにより閲覧者の注意を特定のコンテンツやアクションに集中するように促します。

作成したモーダルは、画像やボタンなどの要素からリンク先として設定すると、クリック時にモーダルが表示されるようになります。

モーダル自体のサイズやスタイル調整は、通常のボックスと同様に行えます。

またモーダルの外側領域の塗りなど特に不透明度を調整する際は、ライブプレビューを使いリアルタイムで確認しながら行うと細かな調整がスムーズに行えます。

モーダルでは、Transition（表示アニメーション）の設定が可能です。Transitionは、レイヤー上で一番上部のボックス（Backdrop）を選択した状態で設定できます。

※現状Transitionの表示スピードなど、細かな調整は設定できません

モーダルのページ設定では「パスを利用」が有効にできます。

有効にすると、モーダルに任意のパスが設定可能になります。公開サイト・ライブプレビューでモーダルを表示した際、 URL の末尾が「m={モーダルのパス名}」形式となります。

この機能はデフォルトでは無効となっています。モーダル表示をURLでシェアする場合に有効にしてご利用ください。例えば、キャンペーンやイベントの詳細情報を含むモーダルURLをメールやSNSマーケティングなどで共有し利用する際などに便利です。