![](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a54c08e1cdae5b16dd1cf53c8ba7b99c4851c5a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUFCJUUzJTgxJUFFJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJThCJUUzJTgyJTg5JUU1JUFEJUE2JUUzJTgyJTkzJUUzJTgxJUE3JUUzJTgxJTg0JUUzJTgxJThGSFRNTCVFMyU4MyVCQkNTUyVFMyU4MyVCQkpTJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NjE4NGUyYWI1MmVmNDlkMzE2YTg1ZTcwZWVlZWU3ZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b2tvdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFkMTJhMDZmYmIyNDg2YjgzNzY2NzU4YzJlZDgxY2Jl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df204387cb327f2954c06f50b8b4fcfd9)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
モーダルの実装から学んでいくHTML・CSS・JS - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
モーダルの実装から学んでいくHTML・CSS・JS - Qiita
背景 雑にコード書いて自分で解説しながらHTMLとCSSとJS少しを勉強する。 モーダルの構造・要件 以下3つ... 背景 雑にコード書いて自分で解説しながらHTMLとCSSとJS少しを勉強する。 モーダルの構造・要件 以下3つのレイヤーからなる。 ウィンドウ 背景 ダイアログ 1. ウィンドウ モーダルを開く前に表示されているレイヤー。 モーダルはこのレイヤーを覆うように表示されることになる。 今回は body タグがこれに相当する。 2. 背景 モーダルを開くボタンを押すと、ベースのレイヤーを覆うように表示される薄暗いレイヤー。 背景を押すと、モーダルは閉じられる仕様になっていることが多い。 overlay と呼ばれることもある。 今回は .modal というクラスで表す。 3. ダイアログ 背景の上に表示されるレイヤー。 ここに文章やボタンが表示される。 閉じるボタンが併せて表示されていることが多い。 今回は .modal-content というクラスで表す。 参考リンク 【Javascript】J