ポップオーバー API で JavaScript を使わずにポップアップを表示する 2023.06.11 Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。 Chrome 114 から追加された ポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示できます。ただポップアップとして表示・非表示を切り替えられるだけでなく、以下のような複雑な要素もデフォルトでサポートしています。 ポップアップの外側をクリックするとポップアップが閉じる Escape キーを押すとポップアップが閉じる 最も大きな z-index の上に表示される(top layer) ポップアップが非表示になったとき、ポップアップ内にフォーカスがある場合前にフォーカスしていた要素にフォーカスが戻る
![ポップオーバー API で JavaScript を使わずにポップアップを表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ce1729cd79ae5b9b73d80a7a1fb3e11aac77ccb/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2F%25E3%2583%259D%25E3%2583%2583%25E3%2583%2597%25E3%2582%25AA%25E3%2583%25BC%25E3%2583%2590%25E3%2583%25BC%2520API%2520%25E3%2581%25A7%2520JavaScript%2520%25E3%2582%2592%25E4%25BD%25BF%25E3%2582%258F%25E3%2581%259A%25E3%2581%25AB%25E3%2583%259D%25E3%2583%2583%25E3%2583%2597%25E3%2582%25A2%25E3%2583%2583%25E3%2583%2597%25E3%2582%2592%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%2599%25E3%2582%258B%2FHTML%2FJavaScript.png)