本当に簡単にできる、HTMLとCSSだけで完結するモーダルUI

## はじめに

こちらの記事からの抜粋です

https://qiita.com/mu_tomoya/items/2a47d2790cdb7cf7c64b

JavaScriptを一切書きません。HTMLとCSSだけで作ります。なのでどんなUIライブラリを使っていようが関係なく使えます。ただし2023年現在はFirefox以外です。あと、`z-index`も使いません。重なり順とか気にしないで大丈夫です。

## 作り方

Popover APIというものを使います。

https://developer.mozilla.org/ja/docs/Web/API/Popover_API

APIといっても別にREST APIではありません。

### モーダルとなる部分を作る

`div`タグなどで好きなようにモーダルを作ります。

```html:モーダル
  <div id="my-popover" popover>
    <p>アゲてひろがるワンダホー</p>
  </div>
```
divの中身はご自由にお作りください。
すごく重要な部分は、`id`と、トップのDOMにある`popover`という属性です。
これでもう重要な部分はほとんどおしまいです。
実際に動かしてみましょう

![スクリーンショット 2023-12-06 21.46.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/6a35cade-65eb-2b18-f809-498898677390.png)

どうでしょう、画面にはアンミカさんもびっくりな白い画面が広がっています。何もないですね。
ポップオーバーは普段隠されているからです。モーダルは確かに何かしないと現れないものですからね。
では、次にモーダルを出現させるためのボタンを用意してみましょう

### ボタンの用意

では、モーダルを開くためのボタンを用意します
```html:ボタン
 <button class="open-button" popovertarget="my-popover" popovertargetaction="show"> 開く </button>
```
大事な部分は、`popovertarget`属性です。ここに、先ほどのモーダルのidを指定してあげましょう。`popovertargetaction`属性に`show`を指定すると、モーダルが出現するようになります。逆に`hide`を指定してあげると、モーダルが閉じるようになります。
実際にボタンを押して開いてみましょう。

![スクリーンショット 2023-12-06 21.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/de1b2822-2c5a-79ff-c423-3c95217ea87e.png)

どうでしょう、モーダルが現れました。すごいことに勝手に画面中央寄せになっています。
ここまででCSSは何にも設定していません。中央にするようなスタイルも書いていません。では、最後に、モーダルっぽくするためにスタイルを当てていきましょう。

### モーダルに見せるための装飾

```html:html
  <button class="open-button" popovertarget="my-popover" popovertargetaction="show"> 開く </button>
  <div id="my-popover" popover>
    <p>アゲてひろがるワンダホー</p>
    <button popovertarget="my-popover" popovertargetaction="hide" class="close-button">
      <svg>
        ...
      </svg>
    </button>
  </div>
```

```css:css
*:popover-open {
  position: relative;
  padding: 1rem;
  border: 1px solid #ccc;
  text-align: center;
  min-width: 300px;
}
*::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

button {
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  width: auto;
  overflow: visible;
  background: transparent;
}
.open-button {
  padding: 0.5rem 1rem;
  border: solid red 1px;
}

.close-button {
  background: white;
  position: absolute;
  right: 0;
  top: 0;
}

```
`*:popover-open`はモーダルそのもののスタイルです。何かスタイルを当てたいときはここに書きましょう。
`*::backdrop`はモーダル直下に適用されるスタイルです。基本的には`background-color`などだけ当てましょう。
`::backdrop`が適用できるのは`dialog`タグやPopover APIおよび全画面表示の、**top-layer**にのみ適用できようできるスタイルです。

**top-layer**は`z-index`よりも優先される、一番トップにくるレイヤーです。なので、わざわざ`z-index`を設定する必要がありません。

https://developer.mozilla.org/en-US/docs/Glossary/Top_layer

これで完成です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEwmzpr" data-editable="true" data-user="mu-tomoya" style="height: 300px; 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/mu-tomoya/pen/ZEwmzpr">
  Popover</a> by Tomoya Masaki (<a href="https://codepen.io/mu-tomoya">@mu-tomoya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 終わりに

以上でおしまいです。何のJSライブラリもCSSライブラリも入れていません。HTMLとCSSのコードだけしか書いてません。何かすごいCSSテクニックを使ったわけでもありません。
こんなに簡単にモーダルを作れるようになりました。
Firefoxももうすぐ適用できるようにはなりそうなので、皆さんもぜひ使ってみてください。

合言葉は **「CSSでできることはJSを使わない」**


## なんでこんな記事書いたの

何とかしてCSSの機能を広めたいと思い、いろいろと試行錯誤してタイトルつけて前の記事を書きましたが、やはりアドベントカレンダーの時期なので、あらゆる良記事の中に埋もれてしまったので、真面目なタイトルにして小出しにわけることにしました。また気が向いたら小出しで分けて書きます。