パーツ > モーダル

モーダル
.modal_opener
data-modal-target="#id"

デモ

  • モーダルを開く(span)

特長

  • 機能性 テキストや画像など様々な要素をトリガーにできる
  • 機能性 モーダルの内容に制約無し
  • ユーザビリティ モーダルを開いた際、背面となるbodyのスクロールを停止

利用方法

クリック(タップ)させる要素に、class値 modal_openerdata-modal-target 属性を加えます。属性値には表示内容を入れたコンテナのidを指定します。サンプルではコンテナはHTML上に記述し display: none; で隠しています。

<span class="modal_opener" data-modal-target='#modal_test'>モーダルを開く</span>