階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
![階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/11360ea84c176183dafe17698a9511fd155eb493/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F230530%2Fimages%2Feyecatch.jpg)