こんにちは、バフェットコード開発部のkosappiです。
スーパーにさんまが並び始めました。ちょっと焼き過ぎかな？というくらい焼いて、かぼすを絞るのが好きです。
HTMLだけでモーダルを作る
popoverを使えば、HTMLだけでモーダルが実装できます。 モーダルは古典的なUIですが、今までHTMLの標準機能としては提供されていませんでした。 MDN
今回紹介する方法では本当にHTMLのみ(CSSも不要)で実現できます。
実装する
早速ですが CodePen に実装したものを置きました。
See the Pen Untitled by kosappi (@kosappi) on CodePen.
この２行だけでOK。
<button popovertarget="my-new-popover">ボタンの文言</button> <div popover id="my-new-popover">コンテンツ</div>
なにがすごいのか
今までの HTML でモーダルを実現しようとすると、下記の手段をとることになります。これはいずれも JavaScript を書く必要があります。
- alertでモーダルの代わりを作る
- JavaScriptでDOMを操作する
- CSSでセレクタを工夫してがんばる
- jQueryを使う
- ReactやVueなどを使う
popover API を利用すれば、こういった JavaScript を書かずに、HTML の要素間の関係だけでモーダルを実現できます。 コードの量を減らしたい場面では便利ではないでしょうか？
当然ですが、細かい UI の調整やイベントのカスタマイズには向かないので、そういった場合は JavaScript を書くことになります。
最後に
バフェットコードでは、HTMLの最新機能を使ってcoolなサービスを開発してくれるエンジニアを募集しています！
