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

はじめに

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

イメージ

このような形です。
かっこいいですよね。

コード

該当のビュー

省略

  <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はモーダルウィンドウの部分だけにします。

//モーダルウィンドウ
.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を押すと、
ブワッと出ます。

まず、前述の通り、

.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;することで、黒い部分よりも前面になるように設定します。

.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タグです。

<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をクリックすると、
検索項目と黒い部分が出るようにしました。（フェードアウト）

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

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

<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で作る）
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る

明日も頑張ります！！