Question

我正在开发一个带有bootstrap alpha 4-v6的Rails 5.1应用程序，我正在启动一个类似的模式：

_assigned.html.erb （摘录）

<%= link_to "Notes", '#note-modal', data: {toggle: "modal", target: "#note-modal#{index}", backdrop: false }, class: 'btn btn-sm btn-primary' %>
<%= render 'shared/note_modal', call: call, index: index %>

以下是我note-modal

的内容

_note_modal.html.erb

<div id="note-modal<%= index %>" class="modal fade">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Call Notes <%= call.incident_number %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= form_for @call_note, url: call_notes_path, method: 'post', html: {class: "nifty_form"} do |f| %>
          <%= f.hidden_field :call_id, value: call.id %>
          <%= f.hidden_field :user_id, value: current_user.id %>
          <%= f.text_area :body, size: "60x12" %>
          <%= f.button "Create", class: 'btn btn-info btn-sm' %>
        <% end %>

        <% call.call_notes.each do |cn| %>
          <li><%= cn.body %> | <%= cn.user.username %> | <%= cn.created_at.strftime("%m/%d/%Y-%H:%M") %></li>
        <% end %>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

当我在视图中并触发模态时它将弹出并工作，但我在主视图中有一个ajax调用刷新视图部分，当它模式消失但背景仍然存在且你不能点击任意位置使其消失。你必须刷新浏览器窗口才能摆脱背景。

我一直在阅读bootstrap 4 docs和谷歌搜索但到目前为止还没有找到答案。希望有人能指出我正确的方向。

应该注意的是，这种行为发生在最新版本的chrome以及Safari上。

这是一个错误，还是我的代码设置不正确？

顺便说一下，我的视图里面是JS，它被激活以对URL和partials端点进行ajax刷新：

wheelchair_calls.html.erb

<div id="active">
  <%= render "assigned" %>
</div>

<div id="inactive">
  <%= render "unassigned" %>
</div>


<script>
  $(function() {
    setInterval(function(){
      $.getScript('/calls/wheelchair_calls/?region=<%= params[:region] %>')
    }, 15000);
  });
</script>

以下是被解雇的js：

wheelchair_calls.js.erb

$("#active").html("<%= escape_javascript render("assigned") %>");
$("#inactive").html("<%= escape_javascript render("unassigned") %>");

Answer 1

哦，我知道为什么。您的模态位于_assigned.html.erb中，位于#active内。使用

执行15s脚本时

$("#active").html("<%= escape_javascript render("assigned") %>");

您正在从浏览器文档对象模型（DOM）中分离模态<div>并丢弃它们，然后重新呈现具有相同名称的新模态。这使得模态消失。

这会删除弹出的模态。背景是Bootstrap叠加的独立背景，可能附加到<body>。

您必须在页面上保持模态静态，并且只重新渲染/刷新绝对最小的HTML。如果您需要刷新模式中的数据，则必须为此单独<div>，并且仅在<div>内刷新.modal-body。

Answer 2

我能够确定这是一个引导程序4的错误，在ajax刷新视图后留下背景。这是新的模态代码：

<div id="assigned-note-modal<%= index %>" class="modal hide fade" data-backdrop="">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Call Notes <%= call.incident_number %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= form_for @call_note, url: call_notes_path, method: 'post' do |f| %>
          <%= f.hidden_field :call_id, value: call.id %>
          <%= f.hidden_field :user_id, value: current_user.id %>
          <%= f.text_area :body, size: "60x12" %>
          <%= f.button "Create", class: 'btn btn-info btn-sm' %>
        <% end %>

        <% call.call_notes.each do |cn| %>
          <li><%= cn.body %> | <%= cn.user.username %> | <%= cn.created_at.strftime("%m/%d/%Y-%H:%M") %></li>
        <% end %>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

通过使用data-backdrop=""，模式关闭后背景不会持续存在。

Bootstrap 4模态消失并在Ajax Refesh上留下背景

2 个答案: