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

はじめに

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

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

作り方

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

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

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

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

モーダル

  <div id="my-popover" popover>
    <p>アゲてひろがるワンダホー</p>
  </div>

divの中身はご自由にお作りください。
すごく重要な部分は、idと、トップのDOMにあるpopoverという属性です。
これでもう重要な部分はほとんどおしまいです。
実際に動かしてみましょう

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

ボタンの用意

では、モーダルを開くためのボタンを用意します

ボタン

 <button class="open-button" popovertarget="my-popover" popovertargetaction="show"> 開く </button>

大事な部分は、popovertarget属性です。ここに、先ほどのモーダルのidを指定してあげましょう。popovertargetaction属性にshowを指定すると、モーダルが出現するようになります。逆にhideを指定してあげると、モーダルが閉じるようになります。
実際にボタンを押して開いてみましょう。

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

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

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

*: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を設定する必要がありません。

これで完成です。

See the Pen Popover by Tomoya Masaki (@mu-tomoya) on CodePen.

終わりに

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

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

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

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