Bootstrap Modal Dialog Example

_modal_dialog.html.erb

<%# /app/views/shared/_modal_dialog.html.erb %>

<div class='modal fade'>
  <div class='modal-dialog _modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
        <span class='modal-title'></span>
      </div>
      <div class='modal-body _input-lg'></div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-lg btn-cancel' data-dismiss='modal' />
        <button type='button' class='btn btn-lg btn-ok' />
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

_user_profile_list.html.erb

<%# /app/views/shared/_user_profile_list.html.erb %>

<table class='table table-striped input-lg'>
  <thead>
    <tr>
      <th>Profile Name</th>
      <th>Profile Type</th>
      <th>Created</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% user_profiles.each do | profile | %>
    <tr>
      <%= content_tag :td, profile.profile_name, class: 'ellipsis', style: 'max-width:200px;width:33%;' %>
      <%= content_tag :td, style: 'width:33%;' do %>
        <% css_class = profile.type.match(/recruiter/i) ? 'label-success' : 'label-primary' %>
        <span class='label <%=css_class %>'><%= profile.type.titleize %></span>
      <% end %>
      <%= content_tag :td, profile.created_at.strftime('%m-%d-%Y') %>
      <td>
        <%= link_to edit_profile_path(profile), { class: 'pull-left btn btn-edit transparent', title: 'Edit profile' } do %>
          <%= content_tag :i, nil, class: 'fa fa-pencil fa-2x' %>
        <% end %>

        <%= button_to profile_path(profile), { method: :delete, class: 'btn btn-delete transparent', title: 'Delete profile', data: { profile_name: "#{profile.profile_name}" } } do %>
          <%= content_tag :i, nil, class: 'fa fa-times fa-2x' %>
          <%= hidden_field_tag :profile_id, profile.id %>
        <% end %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

delete-profile.js

// /app/assets/javascripts/delete-profile.js

// For use with user_profiles/new.html.erb
// Expects skill-helpers.js
$(function() {
  var deleteButtonSelector = '.btn-delete';

  $(deleteButtonSelector).each(function() {
    $(this).click(function(event) {
      event.preventDefault();
      showDeleteModal(this);
    });
  });

  function showDeleteModal(delete_button) {
    $('.modal').on('show.bs.modal', function (event) {
      var modal = $(this);
      modal.find('.modal-title').html('<span class="fa fa-2x">Whoa, take it easy!</i>');
      modal.find('.modal-header').addClass('orange');
      modal.find('.modal-body').html("Are you sure you want to delete profile <i>" + $(delete_button).data('profile-name') + '</i>?');
      modal.find('.btn-ok').addClass('btn-special dark')
        .text("Thanks for the warning, delete it!")
        .click(function() { $(delete_button).off('click'); $(delete_button).click(); });
      modal.find('.btn-cancel').addClass('btn-default').text('Cancel');
    });
    showModal();
  };

  function showModal() {
    $('.modal').modal().show();
  };
});

index.html.erb

<%# /app/views/user_profiles/index.html.erb %>

<% content_for :head do %>
  <%= javascript_include_tag 'delete-profile' %>
  <%= javascript_include_tag 'modal-dialog-center' %>
<% end %>

<div class='container'>
  <div class='row'>
    <div class='col-lg-12'>
        <%= render partial: 'shared/page_header', object: 'My Profiles' %>
    </div>
  </div>

  <div class='row'>
    <div class='col-lg-12'>
        <%= render partial: 'shared/user_profile_list', object: @user_profiles, as: :user_profiles %>
    </div>
  </div>
</div>

<%= render partial: 'shared/modal_dialog' %>

Miscellaneous file changes

# *** ATTENTION ***
# Be sure to run the below generator after updating the below files:
# $ rails generate bootstrap:install less --no-coffeescript -p
# $ rails generate rspec:install -p
# *** ATTENTION ***

#
# /Gemfile

# Gems to add bootstrap, jquery using less, and font-awesome-rails.
# Note: including sprockets downgrade to 3.6.3 gets rid of the "DEPRECATION WARNING: Sprockets method `register_engine` 
# is deprecated." warning.
gem 'sprockets', '3.6.3'
gem 'therubyracer'
gem 'less-rails' # Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem 'twitter-bootstrap-rails', '~> 4.0'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'

#
# /app/javascripts/application.js

# jQuery 3, jQuery rails unobtrusive javascript and twitter bootstrap javavascript inclusions.
//= require jquery3
//= require jquery_ujs
//= require_tree .
//= require twitter/bootstrap

#
# /app/stylesheets/application.css

# Inclusion of font-awesome and bootstrap_and_overrides.css.less.
 *= require_tree .
 *= require_self
 *= require font-awesome
 *= require bootstrap_and_overrides

modal-dialog-center.js

// /app/assets/javascripts/modal-dialog-center.js

$(function() {
   function centerModal() {
      $(this).css('display', 'block');
      var $dialog = $(this).find(".modal-dialog");
      var offset = ($(window).height() - $dialog.height()) / 2;
      // Center modal vertically in window
      $dialog.css("margin-top", offset);
   }

  $('.modal').on('show.bs.modal', centerModal);
  $(window).on("resize", function() {
     $('.modal:visible').each(centerModal);
  });
});