[Rails]モーダルウィンドウを作る

# はじめに
本記事では、過去に作った`モーダルウィンドウ`の作り方を記述します。

## イメージ
このような形です。
かっこいいですよね。

![1a72749226abfeb518fca661092f8b69.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768158/407aa99b-82e0-0699-7373-95ebbc9ccfc9.gif)

# コード
該当のビュー

```erb

省略

  <div class="menu-details">
    <div class="search-contents">
      <div class="fas fa-search"></div>
        <h2 class="menu-content">SEARCH</h2>
    </div>
  </div>

省略

<%# モーダルウィンドウ %>
<div class="modalsearch">
  <i class="far fa-times-circle modalsearch-close"></i>
  <div class="modalsearch-contents">
    <div class="modalsearch-left">
      <h2 class="modalsearch-title">Let's<br/>Search !</h2>
    </div>
    <div class="modalsearch-right">
      <div class="modalsearch-contents">
        <%= search_form_for @q, url: search_foods_path, class: "food-search", id:"pull-down" do |f| %>
          <%= f.label :shop_name_or_shop_name_kana_or_food_name_or_station_cont, '店名・メニュー名・駅名', class: "search-label" %><br/>
          <%= f.text_field :shop_name_or_shop_name_kana_or_food_name_or_station_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
          <%= f.label :user_nickname_cont, 'ユーザー名', class: "search-label" %><br/>
          <%= f.text_field :user_nickname_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
          <%= f.label :meal_type_id_eq, '種類', class: "search-label" %><br/>
          <%= f.collection_select :meal_type_id_eq, MealType.all, :id, :name, {include_blank: '--', disabled: 0}, class: "search-text" %><br/>
          <%= f.label :spicy_level_id_eq, '辛さ', class: "search-label" %><br/>
          <%= f.collection_select :spicy_level_id_eq, SpicyLevel.all, :id, :name, {include_blank: '--'}, class: "search-text" %><br/>
          <%= f.submit "SEARCH", class: "search-submit" %><br/>
        <% end %>
      </div>
    </div>
  </div>
</div>
<div class="masksearch"></div>

<script>
  $(function() {
    $('.search-contents').on('click',function(){
      $('.modalsearch,.masksearch').fadeIn();
    });
    $('.modalsearch-close,.masksearch').on('click',function(){
      $('.modalsearch,.masksearch').fadeOut();
    });
  });
</script>
<%# /モーダルウィンドウ %>
```
下から１３行目にある`<div class="masksearch"></div>`はdivタグで囲っていませんので、注意。
ここはブワッと出た時の黒い部分になります。
CSSでは画面全体を黒くするようにしております。

CSSはモーダルウィンドウの部分だけにします。

```css
//モーダルウィンドウ
.modalsearch {
  position: fixed;
  background-image: image-url("search-title.png");
  background-size: cover;
  background-repeat: repeat;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  width: 80vw;
  height: 70vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  z-index: 2;
  display: none;
}

.modalsearch-contents {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.modalsearch-title {
  height: 20vh;
  width: auto;
  color: rgb(0, 0, 0);
  font-family: 'Permanent Marker', cursive;
  font-size: 7vw;
  text-align: center;
}

.modalsearch-close {
  cursor: pointer;
  font-size: 4vw;
}

.search-label {
  font-family: "M PLUS Rounded 1c";
  font-size: 1.2vw;
}

.search-text {
  width: 25vw;
  height: 5vh;
  color: #000000;
  border: solid 3px #000000;
  margin: 0.5em;
  font-size: 1.2vw;
  background-color: #ffffff33;
}

.search-submit {
  width: 15vw;
  height: 7vh;
  color: #000000;
  border: solid 3px #000000;
  border-radius: 20%;
  margin: 0.5em;
  font-size: 1.2vw;
  background-color: #ff00004f;
  font-family: 'Permanent Marker', cursive;
}

.masksearch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  display: none;
}
// /モーダルウィンドウ
```

初めの方の`<h2 class="menu-content">SEARCH</h2>`で`SEARCH`を押すと、
ブワッと出ます。

まず、前述の通り、

```css
.masksearch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  display: none;
}
```
は外側の黒い部分です。

`potision: fixed;`にする必要があるので注意です。
出ないとスクロールしたらその分だけ黒い部分はなくなります。

内側の部分についても、黒い部分よりも小さくなるようにCSSで設定し、
以下の通り、これも`potision: fixed;`します。
また、`z-index: 2;`することで、黒い部分よりも`前面`になるように設定します。

```css
.modalsearch {
  position: fixed;
  background-image: image-url("search-title.png");
  background-size: cover;
  background-repeat: repeat;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  width: 80vw;
  height: 70vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  z-index: 2;
  display: none;
}
```

最後は、scriptタグです。

```erb
<script>
  $(function() {
    $('.search-contents').on('click',function(){
      $('.modalsearch,.masksearch').fadeIn();
    });
    $('.modalsearch-close,.masksearch').on('click',function(){
      $('.modalsearch,.masksearch').fadeOut();
    });
  });
</script>
```
`.search-contents`をクリックすると、
検索項目と黒い部分が出る（フェードイン）ようにしました。

逆に、検索項目内にある印`(ここでは).modalsearch-close`と黒い部分`.masksearch`をクリックすると、
検索項目と黒い部分が出るようにしました。（フェードアウト）

検索項目については、
それぞれのアプリケーションで表現したいことを記述すれば完了です。

私の場合は、以下の部分です。

```erb
<div class="modalsearch-contents">
    <div class="modalsearch-left">
      <h2 class="modalsearch-title">Let's<br/>Search !</h2>
    </div>
    <div class="modalsearch-right">
      <div class="modalsearch-contents">
        <%= search_form_for @q, url: search_foods_path, class: "food-search", id:"pull-down" do |f| %>
          <%= f.label :shop_name_or_shop_name_kana_or_food_name_or_station_cont, '店名・メニュー名・駅名', class: "search-label" %><br/>
          <%= f.text_field :shop_name_or_shop_name_kana_or_food_name_or_station_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
          <%= f.label :user_nickname_cont, 'ユーザー名', class: "search-label" %><br/>
          <%= f.text_field :user_nickname_cont, placeholder: "KEYWORD", class: "search-text" %><br/>
          <%= f.label :meal_type_id_eq, '種類', class: "search-label" %><br/>
          <%= f.collection_select :meal_type_id_eq, MealType.all, :id, :name, {include_blank: '--', disabled: 0}, class: "search-text" %><br/>
          <%= f.label :spicy_level_id_eq, '辛さ', class: "search-label" %><br/>
          <%= f.collection_select :spicy_level_id_eq, SpicyLevel.all, :id, :name, {include_blank: '--'}, class: "search-text" %><br/>
          <%= f.submit "SEARCH", class: "search-submit" %><br/>
        <% end %>
      </div>
    </div>
  </div>
```

以上です。

いかがでしょうか。

# 終わりに
モーダルウィンドウがアプリケーションにあるとかなりおしゃれになるので、どんどん使用していきたいところです。
特にログアウト時や投稿削除時には、入れておくことで未然に誤作動を防ぐことができますね。

以下参考サイトです。
[モーダルウィンドウ・ダイアログウィンドウの作り方１（HTML、CSS、JavaScriptで作る）](https://www.youtube.com/watch?v=BZX6RxQzgrQ)
[【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る](https://webdesignday.jp/inspiration/technique/css/4680/)

明日も頑張ります！！