HTMLのdialog要素でDialogComponentを作る（React）
2022年3月から主要ブラウザ(Chrome, Edge, Firefox, Safari)で dialog要素が利用できるようになったそうなのでそれを使ってDialogすなわりModalのコンポーネントを作ったらどんな感じになるかを試してみました.説明少なめですが記事にします. また,今回はできるだけ最小限のコードで作成することを意識しています. dialog要素ってなに？ eventで表示/非表示を切り替えることができる backdropという疑似要素があり,すでにOverlayが作成されている（これ結構嬉しい） メリットはこの2点かなと思います. わかりやすく作ってみる Reactで最小限に作るとこんな感じですね. const Sample = () => { const dialogRef = useRef<HTMLDialogElement>(null); const openD
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
overscroll-behaviorがお手軽！ モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA
3つ値の具体的な動作は、次のサンプルで確認できます。overscroll-behaviorプロパティがcontainまたはnoneだった場合、背面のコンテンツにスクロールが伝達しないことを確認できます。 加えてcontainは、オーバースクロールの動作を維持します。このサンプルでは、コンテンツを超えて上下にバウンスする効果を確認できます。（次のGIF画像の2番目） 効果が有効かどうかは、OSやブラウザによって異なりますが、モバイルのPull-to-Refreshが有効なブラウザから確認できると思います。 サンプルを別ウインドウで開く コードを確認する（HTML、CSS） どのような使い方ができるのか、作例をいくつか用意しましたのでご紹介します。実装の参考にしてみてください。 画面固定で表示するUIの作例 画面固定で表示されるダイアログとハンバーガーメニューをdialog要素で実装し、ove
モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
便利なモーダル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します。 一番簡単な開くは以下で
【javaScript】でスクロールを禁止にする（PC、スマホ対応） | とんプログラミング
そこで今回は、スマホでもスクロール（タッチ操作）禁止にする方法を紹介します。 スマホの場合は、cssではなくjavaScriptでの実装が必要です。 以下のソースのno_scroll()を初期化処理などで呼び出せば、PC、スマホでスクロールができなくなります。 スクロール禁止を解除したい場合は「return_scroll()」を呼び出せばOKです。 [index.js] // スクロール禁止 function no_scroll() { // PCでのスクロール禁止 document.addEventListener("mousewheel", scroll_control, { passive: false }); // スマホでのタッチ操作でのスクロール禁止 document.addEventListener("touchmove", scroll_control, { passive
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components
<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio"
モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
CSSだけでLightbox風に画像ポップアップ
Result アニメーションエフェクトの不要なら結構シンプルなコードになります css.row figure {/*表示されている画像。*/ height: 240px; width: 240px; margin: 0; background-size: cover; background-position: 50% 50%; transition: all 1s ease-in-out; background-repeat: no-repeat; z-index: 2; display: inline-block; position: relative; } .row a {/*拡大画像を表示させる為の要素*/ display: inline-block; text-align: center; margin: 40px; text-decoration: none; color: wh
CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ
Result 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :target疑似クラスを使って実装されています css.container {/*全体*/ background-color: #9191E9; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } .button {/*ボタンのスタイル*/ text-decoration: none; font-size: .875rem; font-weight: 300; text-transform: uppercase; display: inline-block; border-radius: 1.5rem; background-color: #fff; color:
実装が簡単で、動作も快適！CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal
一昔前までは、完全にJavaScriptの領域でした。 IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。 非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイルシートです。
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
10 Pure CSS Modal Window Snippets - Developer Drive
Modal windows were always the realm of JavaScript and there are plenty of scripts to try. But with CSS3 it’s even easier to create a modal in pure CSS. The effects are somewhat limited but you can still make an excellent experience without relying on scripting. Most of these CSS examples are scattered to various corners of the web so I’ve curated some of the best ones here. These vary from simple
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hunzaboy.github.io