オーバーレイ

概要

HTMLコード

オーバーレイは下記のコードにより実装されます。

<div class="l-overlay js-overlay" aria-hidden="true"></div>

最小設定

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
});

オプション

オプション 概要
button トグルボタンのセレクターを指定します。
overlay オーバーレイのセレクターを指定します。
closeButton 閉じるボタンのセレクターを指定します。（省略可）
closeOnResize リサイズ時にオーバーレイを閉じるかを指定します。（省略可）
excludeClose クリック無視エリアのセレクター配列を指定します。（省略可）
focusTrap フォーカストラップのセレクターを指定します。（省略可）
activeClass アクティブ時に付与されるクラス名を指定します。（省略可）

button

button: string

トグルボタンのセレクターを指定します。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
});

overlay

overlay: string

オーバーレイのセレクターを指定します。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
});

closeButton

closeButton: string（省略可）

閉じるボタンのセレクターを指定します。グローバルナビゲーション内にボタンがある場合などに使用します。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
  closeButton: '.js-gnavCloseBtn',
});

closeOnResize

closeOnResize: boolean = false

リサイズ時にオーバーレイを閉じるかを指定します。（省略可）

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
  closeOnResize: true,
});

excludeClose

excludeClose: string[]

クリック無視エリアのセレクター配列を指定します。（省略可）サンプルコードでは、headerと除外エリアをクリックしても、オーバーレイは閉じないように設定されています。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
  excludeClose: ["header", ".js-excludeArea"],
});

focusTrap

focusTrap: [string, string]（省略可）

フォーカストラップの最初と最後の要素のセレクターを配列で指定します。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
  focusTrap: [".js-first-btn", ".js-return-btn"],
});

activeClass

activeClass: string = "is-active"（省略可）

アクティブ時にボタンとオーバーレイに付与されるクラス名を指定します。

new Overlay({
  button: ".js-overlayBtn",
  overlay: ".js-overlay",
  activeClass: "is-open",
});