Rails：模态表单提交后页面处于空闲状态且不可点击

Question

我在 `bootstrap modal 中有一个表单：

<div class="modal fade" id="form_modal" tabindex='-1'>
  <%= simple_form_for @detail_question, remote: true do |f| %>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Question</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <%= f.error_notification %>
          <div class="form-inputs">
            <span> <span id="characterLeft"></span>.</span>
            <%= f.input :content, label: false %>

          </div>
          <div id="formModal">
            <%= render partial: 'layouts/messages' %>
          </div>
        </div>
        <div class="modal-footer">
          <%= f.button :submit, "Ask", class:" btn btn-primary" %>
        </div>
      </div>
    </div>
  <% end %>
</div>

控制器创建方法：

def create
  @detail_question = DetailQuestion.new(question_params)

  respond_to do |format|
    if @detail_question.save
      flash.now[:success] = "Question was successfully sent!"
      format.js { render 'create.js.erb' }
    else
      flash.now[:alert] = "Something went wrong!"
      format.js { render 'create.js.erb' }
    end
  end
end

create.js.erb

<% if @detail_question.save %>
  $("#flash").html("<%= escape_javascript(render partial: 'layouts/messages') %>");
  $("#detail_questions_<%= @detail_question.product.id %>").html("<%= escape_javascript(render partial: 'detail_questions/detail_questions', locals: { product: @detail_question.product } ) %>");
<% else %>
$("#formModal").html("<%= escape_javascript(render partial: 'layouts/messages') %>");
<% end %>

当我提交表单时，模式会关闭并创建问题，呈现 Flash 消息，并且还会呈现部分内容，就像它假设的那样。但我遇到的唯一错误......是页面加载为不可点击和空闲，请看下面的图片。

知道我做错了什么吗？

Answer 1

长话短说 - 问题出在模态背景中。添加解决

$('#form_modal').modal('hide') 
$('.modal-backdrop').remove(); 

创建.js.rb