2020年1月22日jQueryでモーダルを作りたい、でもやり方がいまいち思い出せない。思って、Progateの中級編で復習をしてきました。ProgateではHTMLとCSSはコピペだったので、一から作るときに手が止まってしまうことがあります。そこで、Progateのデザインを参考に、モーダルをHTMLから作ってみました。2020.1.8追記そもそもモーダルとは?Progateの画面を拝借しましたが、こんな感じでポップアップで表示され、閉じるボタンや送信ボタンを押すと、次の画面に移動するものです。あるのが、ログインフォームだったり、サイトの説明であったり、ユーザーの操作待ちみたいな画面ですね。見るレイアウトで、画像をクリックすると、ポップアップで拡大表示される動きがありますが、モーダルではなくてLightBoxというみたいです。これも合わせて知っておきたいところですね。それでは、「モーダルとは何か?」わかったところで、モーダルの作り方をご紹介します。2019年6月6日モーダルの作り方は上記のようにツイートでまとめています。何かしらのボタンをクリックするとモーダルが表示されて、閉じるボタンを押すとモーダルが隠れる動作ができれば、とりあえずオッケーですね。書き方クリックするボタンに「login-show」のclass指定モーダルと閉じるボタンをHTMLで作るモーダルをデフォルトでdisplay:none;モーダル全体→#login-modal閉じるボタン→#close-modalそれでは具体的な書き方ですが、詳しくはコードをみながら解説していきましょう。CodePen.このままコピペすればモーダルはできますが、ポイントを抑えて少しだけ解説を入れておきます。僕が実際にモーダルを作ってみて感じたポイントは以下の通りです。jQueryは簡単なのですが、HTMLとCSSはしっかり理解しておく必要があるな、という印象です。modalをwrapperで囲む表示されるmodal要素をmodalを包むwrapper要素で囲むことです。modalは中央に表示される、テキストなどが入った部分。modal-wrapperは、その背景に表示されているグレーアウトしている部分です。上記画像でいうと、modal-wrapperは黄色、modalはピンクで囲んでわかりやすくしています。してマークアップすることで、ポップアップされている要素が際立ちますし、「ポップアップしてるんだな」「何か操作をしないといけないんだな」とわかりやすくなりますね。wrapperはposition:fixed;しつつdisplay:none;さらに、wrapperは以下のコードを記述し、背景に固定しつつ、デフォルトで非表示の状態にしておき、wrapperごとjQueryで表示→非表示の切り替えを行います。none;}あとは、modalの表示をposition:absolute;などで上下左右中央揃えにします。中央揃えのやり方は、別記事でも解説していますので、参考にしてみてください。最後に、jQueryを記述しますが、上記の画像のい太い色で囲った部分のクラス名を合わせます。});これで完成です。jQueryのコードはシンプルでわかりやすいですね。まとめ:基本が理解できれば応用もきくモーダルは基本ができていれば応用も大丈夫だと思っています。今回はProgateの中級編のコードを参考に作りましたが、ほとんど変わらないやり方で実装できそうなイメージです。モーダルは、いろんなWebサイトでよく見かけるので、すぐに実装できるようにストックしておきたいですね。2020.1.8追記Progateのコードそのままだったので、オリジナルに書き換えたのが下記です。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。