Bootstrap模式不关闭数据关闭（Rails）
我有一个带有编辑模式的rails应用程序。 提交功能起作用，但关闭按钮不起任何作用。
Edit.js.erb：
$("#modal-window").html("<%= escape_javascript(render 'users/edit') %>");
_edit.html.erb
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<%= form_for @user,url: root_path,:method => :GET do |f|%>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.submit "Save changes", class: "btn btn-primary" %>
<%# submit_tag 'Cancel', :type => :reset, :class => "btn btn-danger", "data-dismiss" => "modal", "aria-hidden" => "true" %>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
从视图中打开并容纳模态的线条
<%= link_to 'Edit Password', edit_path(user.id), {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'}
......
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
我有宝石设置。 //= require bootstrap/modal和//= require jquery在我的application.js中
编辑：完整的application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require bootstrap/modal
//= require jquery
由于bootstrap-modal-rails gem可以与Rails 4应用程序版本一起使用，因此您可以考虑使用Bootstrap模块来使其工作。
你可以创建一个模态div，然后添加一个按钮，这个按钮会向控制器中的某个方法发出请求，这个方法会用一个js文件进行响应，然后渲染将填充模态div的部分。
在你的index.html.erb你可以设置link_to helper ：
<%= link_to 'Edit Password', edit_path(user), remote: true, data: { toggle: 'modal', 'target': '#modal-window' } %>
...
<!-- Modal -->
<div class="modal fade " id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
这指定了路径，在这种情况下，它是响应UsersController的edit方法的路径，添加remote: true选项以启动对此方法的异步请求，并将数据属性指定为数据data-toggle和data-target 。
然后，如果您愿意，可以在底部创建#modal-window div，将其设置为引导模式，并且在id和data-target最匹配， link_to助手将被“打开”。
在link_to定义的路径需要一个id ，并使用别名选项来创建简短版本：
get 'users/edit/:id', to: 'users#edit', as: 'edit'
你的控制器只需要方法edit ，它将以Javascript响应，它只接收发送的id参数：
def edit
@user = User.find(params[:id])
end
由于edit以json格式进行响应，因此您需要创建一个与您的方法名称相同的文件以及扩展名为js和erb ，这是edit.js.erb ，并且包含渲染_edit部分的代码，并显示模式：
$("#modal-window").html("<%= j render 'users/edit' %>");
$('#modal-window').modal('show')
最后， _edit partial将包含将被添加到之前创建的div模式的内容，这可以很容易地调整，在.modal-body div中，因此您可以添加表单：
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<%= form_for @user, url: edit_path do |f|%>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %><br>
<%= f.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
请注意，这取决于Bootstrap，因此您需要将gem添加到Gemfile文件，并配置js和css应用程序文件：
# Gemfile
gem 'bootstrap-sass'
# application.js
//= require jquery
//= require bootstrap-sprockets
# application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
在application.js中，由于引导程序依赖于jQuery，因此它必须在引导程序之前添加，而对于css配置，该文件必须是scss才能进行正确的import 。