【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい #CSS

はじめに

みなさんは、HTMLのpopover属性をご存じでしょうか？

実は、先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。

そこで今回は、popover属性を使って、JavaScriptを使わずに、モーダルを作ったので、紹介したいと思います。

HTMLのpopover属性とは

popover属性は、モーダルのような表示されている画面より上の階層に要素を表示させたい時に、JavaScript等で実装することなく、実装できるようになる属性です。

使い方

1. popoverで表示させたい要素に`popover`を指定する

popoverで表示させたい要素にpopover属性を指定することで、ポップオーバー要素として示すことができます。

<button>表示する</button>
<div popover>
    <!-- Modal -->
</div>

2. ポップオーバー要素とトリガー要素を紐づける

ポップオーバー要素にid属性を指定し、トリガー要素にpopovertarget属性を指定します。
ポップオーバー要素のid属性とトリガー要素のpopovertarget属性は同じ値を指定します。

<button popovertarget="Modal">表示する</button>
<div popover id="Modal">
    <!-- Modal -->
</div>

（＋α） 3. トリガー要素のアクションを明示する

トリガー要素にpopovertargetaction属性を指定することで、アクションを指定することができます。
（なくても動きます。）

popovertargetaction="hidden"：popoverを非表示にするアクション
popovertargetaction="show"：popoverを表示にするアクション

<button popovertarget="Modal" popovertargetaction="show">表示する</button>
<div popover id="Modal">
    <!-- Modal -->
    <button popovertarget="Modal" popovertargetaction="hidden">閉じる</button>
</div>

完成形

popover属性は、実験中の機能のため、対応するブラウザーをご確認ください。
can i use：https://caniuse.com/mdn-api_htmlelement_popover

See the Pen popover - sample by でぐぅー | Qiita (@sp_degu) on CodePen.

popover属性を使ったモーダルの作り方

1. HTMLを記載する

<button class="Open" popovertarget="Modal" popovertargetaction="show">モーダルを表示する</button>

<div id="Modal" popover="auto">
  <div class="inner-modal">
    <p class="text">モーダルが表示されました</p>
    <button class="Close" popovertarget="Modal" popovertargetaction="hidden">モーダルを閉じる</button> 
  </div>
</div>

モーダルの要素にid・popoverを指定しています。
モーダルを表示させるボタンにpopovertarget="Modal"・popovertargetaction="show"を指定しています。
モーダルないのモーダルを非表示させるボタンにpopovertarget="Modal"・popovertargetaction="hidden"を指定しています。

2. CSSを記載する

/* スタイル調整 */
body {
  background-color: #212529;
  display: grid;
  height: calc(100vh - 40px);
  margin: 0;
  padding: 20px 0;
  place-items: center;
  width: 100vw;
}

button {
  border: none;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
  padding: 8px 16px;
}

button:hover, button:active {
  opacity: 0.7;
}

.Open {
  background-color: #62929E;
}

.Close{
  background-color: #B9314F;
}

#Modal {
  border: none;
  border-radius: 9px;
  box-shadow: 0 10px 20px -5px #000;
}

.inner-modal {
  align-content: center;
  display: grid;
  justify-items: center;
  padding: 32px;
}

.text {
  font-weight: 600;
  margin: 0 0 16px;
}

popover属性は、HTMLだけで、モーダルが作成できるので、スタイルを調整するためのCSSしか記載していません。

まとめ

今回は、popover属性について紹介しました。

この方法が使えるブラウザも限れられているため、まだ実用的とは言えないですが、
簡単にモーダルやドロップダウン、ポップアップが実装できるようになるので、
実用的になる日が楽しみですね

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい