Remote Bootstrap Modal
A tiny Rails engine that helps you loading remote links into a bootstrap modal.
It was created based on the following post: https://jtway.co/5-steps-to-add-remote-modals-to-your-rails-app-8c21213b4d0c
Installation
Add this line to your application's Gemfile:
bundle add remote_bootstrap_modal
Requirements
- Rails
- Bootstrap
Usage
- Make sure you have bootstrap in your application
- Add this gem to your Gemfile
- Add the following div
<div id="modal-holder"></div>
to your application layout (the modal will be rendered inside it) - Add
//= require remote_bootstrap_modal
to yourapp/assets/javascripts/application.js
(after jquery) - Set the formats you need to respond with
respond_to
(ex:respond_to :html, :json
) - Call
respond_modal_with
in your controller passing the arguments you need - Pass
data: { modal: true }
to links you want to load into a modal (ex:link_to 'Customers', customers_path, class: 'btn btn-default', data: { modal: true }
)
Example
# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
respond_to :html, :json
def new
@message = Message.new
respond_modal_with @message
end
def create
@message = Message.create(message_params)
respond_modal_with @message, location: messages_path
end
private
def set_message
@message = Message.find(params[:id])
end
def message_params
params.require(:message).permit(:name, :body)
end
end
<%# app/views/messages/index.html.erb %>
<%= link_to 'Add Message', new_message_path, class: 'btn', data: { modal: true } %>
<%# app/views/messages/_form.html.erb %>
<%= simple_form_for(@message, remote: request.xhr?, html: { data: { modal: true } }) %>
Customization
It is an engine, you can override any file to customize, you can create a app/views/layouts/modal.html.erb
for instance with the modal layout you want.
License
The gem is available as open source under the terms of the MIT License.