modal

モーダル・ドロワーコンポーネント。fixed で画面中央のオーバーレイモーダル、fixedRight で右パネルドロワーとして動作する。閉じるボタン・オーバーレイクリック・Esc キーで閉じる。

Props

Prop	Type	Default	Description
`id`	`string`	`-`	モーダルID（trigger と contents を紐付け）
`fixed`	`boolean`	`false`	画面中央に固定表示するモーダル
`movie`	`boolean`	`false`	動画用モーダル
`slider`	`boolean`	`false`	Swiper と組み合わせるスライダーモーダル
`hoverPC`	`boolean`	`false`	PC でホバー時にモーダルを開く
`anchor`	`string`	`-`	ルート要素の id 属性
`triggerAttrs`	`object`	`{}`	trigger ボタンへの追加属性

fixed — 中央モーダル

画面中央にオーバーレイ付きで表示。閉じるボタンまたはオーバーレイクリックで閉じる。

コードを見る

<CModal id="demo-fixed" fixed>
  <span slot="trigger">モーダルを開く</span>
  <div slot="closeBtn">モーダルを閉じるボタン</div>
  <div class="c-modal__contents-popup-inner" slot="popup">
    // コンテンツ
  </div>
</CModal>

hoverPC — ホバーモーダル

PCでホバーしたときにモーダルを開く。モーダル要素からマウスが離れると閉じる。

コードを見る

<CModal id="demo-hover" hoverPC>
  <span slot="trigger">モーダルを開く</span>
  <div class="c-modal__contents-popup-inner" slot="popup">
    // コンテンツ
  </div>
</CModal>

movie — 動画モーダル

開くと同時に動画を再生する。閉じるボタン・オーバーレイクリックで閉じると一時停止し、先頭に戻る。

コードを見る

<CModal id="demo-movie" fixed movie>
  <span slot="trigger">モーダルを開く</span>
  <div slot="closeBtn">モーダルを閉じるボタン</div>
  <div class="c-modal__contents-popup-inner" slot="popup">
    <video src='videoのURL' playsinline controls></video>
  </div>
</CModal>

slider — スライダーモーダル

CModalにfixed=trueとslider=trueを付与。triggerをクリックすることで画面中央にモーダルが表示されます。
swiperのjsとcssはsnippets側で読み込んでswiperを初期化しているので、設定は不要です。
triggerのCModalにtriggerAttrs={{ 'data-slide': 数値 }}を渡し、それに対応するswiper-slideに同様のdata-slide属性を設定することで、triggerをクリックした際に対応するスライドを表示した状態でモーダルが開きます。
popup側のCModalにslideSpeedを設定することで、スライドの速度を設定することができます。（デフォルトは400）

コードを見る

{
slides.map((slide, index) => (
<CModal id="demo-slider" fixed slider triggerAttrs={{ 'data-slide': index + 1 }}>
  <span slot="trigger">
    モーダルを開く
  </span>
</CModal>
))
}
<CModal id="demo-slider" fixed slider>
  <div class="c-modal__contents-popup-inner js-modal-notClose" slot="popup">
    <div class="swiper">
      <div class="swiper-wrapper">
        {
        slides.map((slide, index) => (
        <div class="swiper-slide" data-slide={index + 1}>
          <div class="c-modal__contents-popup-slide-inner">
            <div class="c-modal__contents-popup-slide-display">
              // コンテンツ
            </div>
          </div>
        </div>
        ))
        }
      </div>
    </div>
  </div>
  <div slot="prevBtn">スライダーのprevボタン</div>
  <div slot="nextBtn">スライダーのnextボタン</div>
  <div slot="closeBtn">モーダルを閉じるボタン</div>
</CModal>

anchorプロップス

anchorを付与すると、開閉に応じてURLハッシュへ反映される。
また、そのハッシュ付きURL（例: /modal#anchorModal）に直接アクセスした場合も、トリガーをクリックしたときと同様に自動で開く。

コードを見る

<CModal id="demo-anchor" anchor="anchorModal" fixed>
  <span slot="trigger">モーダルを開く</span>
  <div slot="closeBtn">モーダルを閉じるボタン</div>
  <div class="c-modal__contents-popup-inner" slot="popup">
    // コンテンツ
  </div>
</CModal>

modal

Props

fixed — 中央モーダル

モーダルタイトル

hoverPC — ホバーモーダル

ホバーモーダル

movie — 動画モーダル

slider — スライダーモーダル

スライダーモーダル スライド1

スライダーモーダル スライド2

スライダーモーダル スライド3

スライダーモーダル スライド4

anchorプロップス

モーダルタイトル

スライダーモーダルスライド1

スライダーモーダルスライド2

スライダーモーダルスライド3

スライダーモーダルスライド4