jQuery

【jQuery】Progateに学ぶモーダルの作り方【簡単です】

jQueryでモーダルを作りたい、でもやり方がいまいち思い出せない。

そう思って、Progateの中級編で復習をしてきました。

 

ProgateではHTMLとCSSはコピペだったので、一から作るときに手が止まってしまうことがあります。

そこで、Progateのデザインを参考に、モーダルをHTMLから作ってみました。

 

そもそもモーダルとは?

Progateの画面を拝借しましたが、こんな感じでポップアップで表示され、閉じるボタンや送信ボタンを押すと、次の画面に移動するものです。

よくあるのが、ログインフォームだったり、サイトの説明であったり、ユーザーの操作待ちみたいな画面ですね。

 

よく見るレイアウトで、画像をクリックすると、ポップアップで拡大表示される動きがありますが、モーダルではなくてLightBoxというみたいです。

これも合わせて知っておきたいところですね。

 

それでは、「モーダルとは何か?」わかったところで、モーダルの作り方をご紹介します。

モーダルの作り方

 

モーダルの作り方は上記のようにツイートでまとめています。

 

動作

  • クリックをした時に、モーダルが出る
  • 閉じるボタンを押すと隠れる

簡単にいうと、

何かしらのボタンをクリックするとモーダルが表示されて、閉じるボタンを押すとモーダルが隠れる動作ができれば、とりあえずオッケーですね。

 

 

書き方

  • クリックするボタンに「login-show」のclass指定
  • モーダルと閉じるボタンをHTMLで作る
  • モーダルをデフォルトでdisplay:none;
  • モーダル全体→#login-modal
  • 閉じるボタン→#close-modal

それでは具体的な書き方ですが、詳しくはコードをみながら解説していきましょう。

 

モーダルのコーディング

See the Pen
modal
by kei (@kei_01011)
on CodePen.

このままコピペすればモーダルはできますが、ポイントを抑えて少しだけ解説を入れておきます。

僕が実際にモーダルを作ってみて感じたポイントは以下の通りです。

 

  1. modalをwrapperで囲む
  2. wrapperはposition:fixed;しつつdisplay:none;
  3. jQueryでボタンidを指定

正直jQueryは簡単なのですが、HTMLとCSSはしっかり理解しておく必要があるな、という印象です。

 

 

modalをwrapperで囲む

表示されるmodal要素をmodalを包むwrapper要素で囲むことです。

modalは中央に表示される、テキストなどが入った部分。

modal-wrapperは、その背景に表示されているグレーアウトしている部分です。

 

上記画像でいうと、modal-wrapperは黄色、modalはピンクで囲んでわかりやすくしています。

 

こうしてマークアップすることで、ポップアップされている要素が際立ちますし、「ポップアップしてるんだな」「何か操作をしないといけないんだな」とわかりやすくなりますね。

 

wrapperはposition:fixed;しつつdisplay:none;

さらに、wrapperは以下のコードを記述し、背景に固定しつつ、デフォルトで非表示の状態にしておき、wrapperごとjQueryで表示→非表示の切り替えを行います。

/*モーダルラッパー*/
.login-modal-wrapper{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 100;
 display: none;
}

 

あとは、modalの表示をposition:absolute;などで上下左右中央揃えにします。

中央揃えのやり方は、別記事でも解説していますので、参考にしてみてください。

 

http://keibloglife.com/2019/07/08/css-center/

 

jQueryでボタンidを指定

最後に、jQueryを記述しますが、上記の画像のい太い色で囲った部分のクラス名を合わせます。

$(function() {
$('#login-show').click(function(){
  $('#login-modal').fadeIn();
});
// ログインボタン(#login-show)をクリックしたとき#login-modalを表示させる
   
$(".close-modal").click(function(){
  $("#login-modal").fadeOut();
});
// 閉じるボタン(.close-modal)をクリックしたとき、#login-modalを閉じる });

 

これで完成です。

jQueryのコードはシンプルでわかりやすいですね。

 

まとめ:基本が理解できれば応用もきく

モーダルは基本ができていれば応用も大丈夫だと思っています。

今回はProgateの中級編のコードを参考に作りましたが、ほとんど変わらないやり方で実装できそうなイメージです。

 

モーダルは、いろんなWebサイトでよく見かけるので、すぐに実装できるようにストックしておきたいですね。

 

2020.1.8追記

Progateのコードそのままだったので、オリジナルに書き換えたのが下記です。

See the Pen
modal
by kei (@kei_01011)
on CodePen.