Menu icon Foundation
Issues with Reveal Modal and Rails

I'm trying to use the reveal modals within a project and I'm having inconsistent behavior with it. It works when I'm on desktop though sometimes the close button won't close them. Additionally the mobile modals just don't open at all, I'm not getting any kind of errors in my console either. I've included a snippet of how I'm utilizing the modals.

<tbody>
  <% @deletions.each do |a| %>
    <tr>
      <td><%= a.username %></td>
      <td><%= a.name %></td>
      <td><%= a.email %></td>
      <td><%= a.manager ? a.manager.name : "N/A" %></td>
      <td><%= a.employee_type.role %></td>
      <td>
        <a href="#" class="deletion-button" data-reveal-id="deletionAccept_<%= a.id %>">Delete</a>
        <div id="deletionAccept_<%= a.id %>" class="reveal-modal" data-reveal>
          <%= form_tag(admin_users_destroy_path(a.id), :method => 'post') do %>
            <h2>Are you sure you want to delete this user?</h2>
            <button class="deletion-button">
              Delete
            </button>
            <a class="close-reveal-modal">&#215;</a>
          <% end %>
        </div>
      </td>
      <td>
        <%= form_tag(admin_users_approve_path(a.id), :method => 'post') do %>
          <button class="approval-button">
            Restore
          </button>
        <% end %>
      </td>
    </tr>
  <% end %>
</tbody>

modalFoundationFoundation 5

I'm trying to use the reveal modals within a project and I'm having inconsistent behavior with it. It works when I'm on desktop though sometimes the close button won't close them. Additionally the mobile modals just don't open at all, I'm not getting any kind of errors in my console either. I've included a snippet of how I'm utilizing the modals.

<tbody>
  <% @deletions.each do |a| %>
    <tr>
      <td><%= a.username %></td>
      <td><%= a.name %></td>
      <td><%= a.email %></td>
      <td><%= a.manager ? a.manager.name : "N/A" %></td>
      <td><%= a.employee_type.role %></td>
      <td>
        <a href="#" class="deletion-button" data-reveal-id="deletionAccept_<%= a.id %>">Delete</a>
        <div id="deletionAccept_<%= a.id %>" class="reveal-modal" data-reveal>
          <%= form_tag(admin_users_destroy_path(a.id), :method => 'post') do %>
            <h2>Are you sure you want to delete this user?</h2>
            <button class="deletion-button">
              Delete
            </button>
            <a class="close-reveal-modal">&#215;</a>
          <% end %>
        </div>
      </td>
      <td>
        <%= form_tag(admin_users_approve_path(a.id), :method => 'post') do %>
          <button class="approval-button">
            Restore
          </button>
        <% end %>
      </td>
    </tr>
  <% end %>
</tbody>
Wellington Cordeiro over 5 years ago

Anyone have any ideas?