○実装の背景
一月分のカレンダーが実装してあり、日付一日ごとに申請ボタンを実装している。
各日付にある残業申請ボタン押し込みで各一日ごとの申請フォームをモーダルで表示させたい。
モーダルの表示のさせ方は色々あるが、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
<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タグの中にユニークになるようにコードを書く。このとき、#
を忘れないこと。
<!-- 一日分の申請フォーム(モーダルで表示) -->
<%= @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として書く。
申請ボタン側とフォーム側で相違があれば、モーダルは表示できない。
<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">
のような感じ。