フォーカストラップとは? 〜アクセシブルなモーダル〜
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>Dialog</title> </head> <body> <nav> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About</a> </li>
よく使う背景固定モーダルのメモ。(デモページ有り) | CLOSET LAND
モーダルを開いている時に背面コンテンツをスクロールさせたくないときに使います。 JavaScript(Vanilla JS),jQueryの両方対応。iOS対応。レスポンシブ対応。 外部jsonファイルデータからHTMLを生成した後でのモーダル表示も対応してます。jsでDOM生成した後にモーダルが開かず困ったことがあったので自分用メモ。 コードの説明はありませんので、「説明はいらねぇ！コピペだけさせろ！」という方だけデモページを参考にどうぞ。 ※但し、コードは汚いです。 少しずつ追加する予定。 JavaScript(Vanilla JS)のモーダル モーダルコンテンツ全体をスクロール モーダル内のコンテンツが画面内に収まる時は中央に表示、画面の高さを超える場合はモーダルコンテンツをスクロール。 デモサイトはこちら モーダルコンテンツ内部だけをスクロール モーダル内のコンテンツを画面中央に収
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
