はじめに
こちらの記事からの抜粋です
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は何にも設定していません。中央にするようなスタイルも書いていません。では、最後に、モーダルっぽくするためにスタイルを当てていきましょう。
モーダルに見せるための装飾
<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>
*: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の機能を広めたいと思い、いろいろと試行錯誤してタイトルつけて前の記事を書きましたが、やはりアドベントカレンダーの時期なので、あらゆる良記事の中に埋もれてしまったので、真面目なタイトルにして小出しにわけることにしました。また気が向いたら小出しで分けて書きます。