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

## はじめに

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

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

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

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


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

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

#### 2. ポップオーバー要素とトリガー要素を紐づける
ポップオーバー要素に`id属性`を指定し、トリガー要素に`popovertarget属性`を指定します。
ポップオーバー要素の`id属性`とトリガー要素の`popovertarget属性`は同じ値を指定します。

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

#### （＋α） 3. トリガー要素のアクションを明示する
トリガー要素に`popovertargetaction属性`を指定することで、アクションを指定することができます。
*（なくても動きます。）*

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

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

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

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="dyQMwVE" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/dyQMwVE">
  popover - sample</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## popover属性を使ったモーダルの作り方
### 1. HTMLを記載する
```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>
```

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

### 2. CSSを記載する

```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)のフォローをお願いします。

https://twitter.com/degudegu2510