LoginSignup
0

More than 5 years have passed since last update.

Magnific Popupでモーダル表示

Posted at

○実装の背景
一月分のカレンダーが実装してあり、日付一日ごとに申請ボタンを実装している。
各日付にある残業申請ボタン押し込みで各一日ごとの申請フォームをモーダルで表示させたい。

モーダルの表示のさせ方は色々あるが、Magnific Popupで今回は実装。
画像をモーダル表示させたいときに使うことが多いのかな?

まずMagnific Popupを使用するためにプラグインをダウンロード。(右にあるDownload ZIPから)
ダウンロードはこちら
使用するファイルはdistディレクトリにある「jquery.magnific-popup.min.js」と「magnific-popup.css」なので、コピーして適当なフォルダに配置。以下は配置の参考に。
/app/assets/stylesheets/magnific-popup.css
/app/assets/javascripts/jquery.magnific-popup.min.js

show.html.erb
<tbody>
  <% @date.each do |date| %>  <!-- 月初から月末までの繰り返しを変数dateに格納  -->
    <tr>
      <!-- 第一項:申請 -->
      <td class="modal-open"><a href="#<%= date.attendance_day.day %>" class="btn btn-primary">残業申請</a></td>
      <!-- 第二項:日付 -->
      <td><%= date.attendance_day.month %>/<%= date.attendance_day.day %></td>  <!-- 変数dateから月と日を取得 -->
      <!-- 第三項:曜日 -->
      <td><%= @week[date.attendance_day.wday] %></td>  <!-- wdayメソッドは、その日の曜日を数値で戻す。(日曜が0) -->
    </tr>
  <% end %>
</tbody>

○ポイント
申請ボタンをクリックするとモーダルで表示したいので、class="modal-open"とする。
モーダルで表示される申請フォームは3/1、3/2、3/3...とそれぞれがユニークである必要があるので、aタグの中にユニークになるようにコードを書く。このとき、#を忘れないこと。

show.html.erb
<!-- 一日分の申請フォーム(モーダルで表示) -->
  <%= @date.each do |date| %>
    <div class ="white-popup mfp-with-anim mfp-hide" id="<%= date.attendance_day.day %>" style="background-color:white">
      <h3 align="center" style="padding-top:15px">残業申請</h3>
      <%= form_for(date, url: sample_path, method: :post) do |f| %>
        <table class="txt1 table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th>日付</th>
              <th>曜日</th>
              <th>終了予定時間</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <!-- 日付 -->
              <td><%= date.attendance_day.month %>/<%= date.attendance_day.day %></td>
              <!-- 曜日 -->
              <td><%= @week[date.attendance_day.wday] %></td>
              <!-- 終了予定時間 -->
              <td><%= f.time_field :scheduled_end_time, class: 'form-control' %> </td>
            </tr>
          </tbody>
        </table>
        <%= f.submit "申請する", class: "btn btn-sm btn-primary" %>
      <% end %>
    </div>
  <% end %>

○ポイント
class ="white-popup mfp-with-anim mfp-hide"
このクラスはダウンロードしたプラグインのcssファイルに含まれるクラスを指定している。
なので何でもいいわけではない。
id="<%= date.attendance_day.day %>"
次に申請ボタンで書いたユニーク処理を、フォームではidとして書く。
申請ボタン側とフォーム側で相違があれば、モーダルは表示できない。

show.html.erb
<script>
// 1日分の申請フォーム モーダル表示
  $(".modal-open").magnificPopup({
  delegate: 'a'
  // removalDelay: 500,
  // callbacks:{
  //   beforeOpen: function() {
  //     this.st.mainClass = this.st.el.attr('data-effect');
  //   },
  // },
});
</script>

○ポイント
delegate:それをクリックするとモーダルウィンドウを開く要素のセレクタ
'a'というのはa要素を意味する。
モーダルの開閉だけなら、これだけでおっけー。
delegateは開くためのセレクタのようだが、閉もなぜかできる。

コメントアウトさせている箇所はモーダルにアニメーションをつけるためには必要。
data-effectを今回もし指定するなら、申請ボタンのaタグ内に書く。
<a href="#<%= date.attendance_day.day %>" class="btn btn-primary" data-effect="mfp-zoom-in">のような感じ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0