これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
便利なモーダルSweetAlert2 | バシャログ。
どうもfujiharaです。 恥ずかしながら最近まで知らなかった便利なモーダルSweetAlert2をご紹介させていただきます。 背景 フォーム実装していて通信中にモーダル出したいと思い、npmで探していたら 出会いました。Start数(12k超:2020/12/17時点)、Weekly Downloads数共に凄い数です。 使い方 いくつかご紹介します。詳しい使い方は公式サイト を参照下さい。 読み込み <script src="sweetalert2/dist/sweetalert2.all.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script> もしくは npm install して importします。 一番簡単な開くは以下で
[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。 デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。 まずは、デフォルトと表示方向の制御。
![[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3490c5832afd3ee0814fcc1a370df5e31fa876af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018030101.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
