【jQuery~モーダルの表示・非表示~】勉強メモ③

jQueryについて学習中。
今回はモーダルの表示について。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


完成図
-
　-こんなのを実装
![image](https://i.gyazo.com/72eef26e2a5c72a32e10f827b5b11293.gif)
<br>

　-先ずはコードから（ほぼモーダルの部分のみ記載）

```.html:HTML

<header>
  <div class="container">
    <div class="header-left">
    </div>
    <div class="header-right">
      <div class="login" id="login-show">ログイン</div>
    </div>
  </div>
</header>
<!--モーダルの部分のコード -->
<div class="login-modal-wrapper" id="login-modal">
  <div class="modal">
    <div class="close-modal" id="close-btn">
      <i class="fa fa-2x fa-times"></i>
    </div>

    <div id="login-form">
      <h2>Emailログイン</h2>
      <form action="#">
        <input class="form-control" type="text" placeholder="メールアドレス">
        <input class="form-control" type="password" placeholder="パスワード">
        <div id="submit-btn">ログイン</div>
      </form>
    </div>
  </div>
</div>
```

```.css:CSS
/*モーダルの部分のCSS*/
.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;
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
}

.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

#login-form {
  width: 100%;
}

#login-form h2 {
  color: #5f5d60;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

#login-form input {
  width: 320px;
  margin-bottom: 20px;
  font-size: 12px;
  padding: 12px 12px;
  border: 1px solid #d0d5d8;
  border-radius: 5px;
}

#submit-btn {
  display: inline-block;
  padding: 14px 140px;
  background-color: #5dca88;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}
```

```.js:jQuery
$(function() {
  $('#login-show').click(function(){
    $('#login-modal').fadeIn();
  });
  
  $('.close-modal').click(function(){
    $('#login-modal').fadeOut();
  });
  
});
```


モーダルを表示
-
- モーダルとは

　-モーダルとは、clickイベントなどに基づいて、表示・非表示が行われる要素のことをいう。

　今回は、ヘッダーにあるログインボタンをクリックすると、ログインフォームが表示されるというもの。
　
　実装するには、3つのステップで行う。
　・モーダルをCSSで非表示にする
　・ログインボタンにクリックイベントを設定
　・クリックイベントでモーダルを表示
<br>
　一つずつ解説

- モーダルをCSSで非表示にする

　-HTMLで作成したモーダル部分を、display: none;で隠す。

　コードではこの部分

```.html:HTML
<div class="login-modal-wrapper" id="login-modal">
  <div class="modal">
    <div class="close-modal" id="close-btn">
      <i class="fa fa-2x fa-times"></i>
    </div>

    <div id="login-form">
      <h2>Emailログイン</h2>
      <form action="#">
        <input class="form-control" type="text" placeholder="メールアドレス">
        <input class="form-control" type="password" placeholder="パスワード">
        <div id="submit-btn">ログイン</div>
      </form>
    </div>
  </div>
</div>
```

```.css:CSS
.login-modal-wrapper {
  
  /* 省略*/

  display: none;
}
```
<br>

- ログインボタンにクリックイベントを設定

　-イベントの構文は、`$('セレクタ').イベント名(function(){ });`のように書く
　セレクタには、ログインボタンのidを指定　`<div class="login" id="login-show">ログイン</div>`
　ちなみに、idをセレクタにするには、id名の前にはシャープ（#）を使用する。

```.js:jQuery
$('#login-show').click(function(){
    
});
```
<br>

- クリックイベントでモーダルを表示

　-jQueryの書き方は、`$('セレクタ').メソッド（引数）;`
　ログインボタンをクリックしたら、display: none;で隠した要素を
　fadeInメソッドを使用して表示させる。

　ちなみに、要素を表示させる際classではなく、idを指定しているのは、
　この部分 `<div class="login-modal-wrapper" id="login-modal">`
　セレクタには、classを指定してもいいのだが、idは同一ページに一箇所しか存在しないので、
　jQueryの処理が高速化されるので、jQueryオブジェクトのセレクタにはできるだけidを使用した方が良い。

```.js:jQuery
$('#login-show').click(function(){
    $('#login-modal').fadeIn();
});
```
<br>

モーダルを非表示
-
　-表示させたモーダルを、閉じるボタンをクリックした時に、モーダルが閉じるようにする。
　閉じるボタンにclickイベントを設定し、fadeOutメソッドでモーダルを非表示にする。

　-実装するステップ
　・閉じるボタンにクリックイベントを設定
　・fadeOutメソッドでモーダルを隠す

```.js:jQuery
// 閉じるボタンにクリックイベントを設定
$('#close-btn').click(function(){
    // fadeOutメソッドでモーダルを隠す
    $('#login-modal').fadeOut();
  });
```
<br>

これで実装完了です。

<br>

補足
-
- position: fixed;

　-絶対位置への配置となるが、スクロールしても位置が固定されたままとなる。
　似たものとして、position: absolute;があるが、こちらはスクロールしても固定されない。

- cursor: pointer;

　-cursorプロパティは、マウスカーソルの形状を指定する際に使用
　他にも色んなカーソルがあるので下記の記事を参照
　[cursorの解説](https://html-coding.co.jp/annex/dictionary/css/cursor/)

- letter-spacing:

　-letter-spacingプロパティは、文字の間隔を指定する際に使用。
　文字の間隔にはマイナスの値を指定することも可能。

- color: rgba(　)

　-RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもの。
　alphaは色の透明度を表す。
　RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定。
　RGBの色は0-255、または、0%-100%で指定。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定。


- `<i class="fa fa-times"></i>`

　-フォントアイコンの表示。
　使い方は、iタグなどで空要素を作り、class属性値に、faと、アイコンごとのクラスを付ける。
　クラス等を探すには下記の公式ウェブサイトを参照
　[Font Awesome](https://fontawesome.com/icons?from=io)
<br>
過去投稿記事
-
[【jQuery~書き方と各メソッド~】勉強メモ①](https://qiita.com/k-yasuhiro/items/dfe305ff337e6ac8b406)
[【jQuery~準備(読み込み)~】勉強メモ②](https://qiita.com/k-yasuhiro/items/c5f8aa277bd572d89cb4)