BricksBuilderのテンプレート機能を使えば、POPUPを作成することができます。
今回は、その作り方をできるだけ細かく解説していきます。
テンプレートの基本については、別記事で特集していますので、あわせてこちらをご覧ください。
POPUPの作り方と基本設定
まず、Bricksのテンプレート新規作成で「POPUP」を選択し、Bricksの編集画面に進みます。
次に、歯車マーク → テンプレート設定 → POPUP から、POPUPの詳細設定を行います（下図参照）。
POPUP設定項目の解説
Padding
ブラウザ画面に対する余白を設定します。
Align
こちらもブラウザ画面に対して、POPUPの上下左右の位置を指定します。
Close on
Backdrop（画面のオーバーレイ）や、キーボードの ESCキー でPOPUPを閉じられるかどうかの設定です。
ここを None にすると、絶対に閉じられないPOPUP を作ることもできます。
ただしその場合は、
・数秒後に自動で閉じる
・クローズボタンのみで閉じられる
など、必ず閉じる手段を用意する必要があります。
Z-index
画面上の重なり順を指定します。
通常は、一番大きな数値を設定しておけば問題ありません。
Scroll（Body）
POPUP表示中に、背後の画面をスクロールできるかどうかの設定です。
Scroll to top
POPUPを開いたと同時に、画面を最上部までスクロールさせるかどうかの設定です。
正直なところ、この設定の使い道はいまひとつ分かっていません。
ご存じの方がいらっしゃいましたら、ぜひコメント欄で教えてください。
Disable auto focus
POPUPを開いたとき、最初にクリック可能な要素へ自動的にフォーカスを当てるかどうかの設定です。アクセシビリティの観点では OFFのまま が推奨ですが、デザイン面では ON にしたほうが見た目がきれいです。
OFFのままだと、最初のクリック可能要素に四角い枠線が表示されます。
Info Box（map）
地図を配置する場合に使用します。
Fetch content via AJAX
こちらは後日、別記事で解説します。
BREAKPOINTS・BACKDROP・CONTENT設定
BREAKPOINTS
ブレークポイントを設定します。
BACKDROP
POPUPの外側に表示されるオーバーレイです。
Disable backdrop をONにすると背景が無効化され、先ほど設定した「背景をクリックしてPOPUPを閉じる」設定も同時に無効になります。
それを避けるには、Disable backdropはOFFのまま背景色を 無色透明（#ffffff00） に設定する方法がおすすめです。
CONTENTのPadding
POPUP内部の余白を設定します。
ここで設定しなくても、コンテナ側で調整することも可能です。
POPUP LIMIT と INTERACTIONS
POPUP LIMIT
クリックして表示するPOPUPではなく、自動表示させるPOPUP の表示頻度を制御する設定です。
こちらも後日、詳しく解説します。
INTERACTIONS
同様に、こちらも後日解説予定です。
POPUPのCONDITIONSの設定
次に CONDITIONS を設定します（下図参照）。
ここでは「Entire website（サイト全体）」が設定されています。
例えば、「お問い合わせはこちら」というPOPUPを全ページに表示しつつ、お問い合わせページだけは表示しないといった設定も可能です。
また、クリックで表示するPOPUPの場合も、このCONDITIONSを設定しておかないと表示されません。
ボタンをクリックしてPOPUPを出す設定
次に、ボタンをクリックしてPOPUPを表示させる設定です。
対象となるボタンの INTERACTIONS で設定します（下図参照）。
- Trigger：Click
- Action：Show element
- Target：Popup
- Popup：作成したPOPUPを選択
クリック以外にも、ホバーなどをトリガーにすることも可能です。
閉じるボタンを設定
POPUPには、閉じるボタンを設置するケースが多いと思います。
こちらも同様に、対象エレメントの INTERACTIONS で設定します（下図参照）。
まとめ
以上で、BricksBuilderのテンプレートを使ったPOPUPの基本的な設定は完了です。
あとは、お好みのデザインでおしゃれなPOPUPを作ってみてください。
