This gem ease the use of modal in your Rails application thanks to a Responder. This code is built based on Dmitriy Dudkin's article
Add this line to your application's Gemfile:
gem 'modal-responder-rails'And then execute:
$ bundle
Or install it yourself as:
$ gem install modal-responder-rails
Add the JavaScript to your app/assets/javascripts/application.js:
//= require modal-responderAdd the modal container to your layout file:
<html>
<head>...</head>
<body>
...
<div id="modal-holder"></div>
</body>
</html>By default, this gem is building the modal for Bootstrap 4 but it also
supports Bootstrap 3.
You can configure this by creating the new file
config/initializers/modal_responder.rb with the following:
ModalResponder.configure do |config|
config.bootstrap = 3
endAdd data: { modal: true } to the link opening the modal:
<%= link_to 'Create category', new_category_path, data: { modal: true } %>In the controller generating the modal content, set the resond_to format to
:json and in the action uses the respond_modal_with helper:
class CategoriesController < ApplicationController
respond_to :html, :json
def show
@category = Category.first
respond_modal_with @category
end
endFinally, in the app/views/categories/show.html.erb file set the modal title,
body and footer:
<%= content_for :title, @category.name %>
<div class="modal-body">
<%# Your code here ... %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>In the case you want a modal without a header, meaning instead of having this:
you want this:
you just have to add the following to your app/assets/stylesheets/application.scss:
*= require modal-responder-no-header
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
The gem is available as open source under the terms of the MIT License.