Rails 页面加载模态背景两次？答案

【问题标题】：Rails page loads modal-backdrop twice?Rails 页面加载模态背景两次？
【发布时间】：2023-03-08 07:05:01
【问题描述】：

当我关闭模态（在模态外单击）时，网页仍然是黑暗的，我必须在页面上的某处再次单击它才能再次正常。有谁知道可能是什么问题？

_post_modal.html.erb

<div id="<%= p.id %>" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <p><h3 id="myModalLabel"><%= p.title %></h3></p>
    </div>
    <div class="modal-body">
        <%= raw(p.link) %>
    </div>
</div>

_single_post.html.erb

<% @posts.each do |p| %>
   <%= render "post_modal" %> 
<% end %>

list.html.erb

<div class="container">
   <%= render 'single_post' %>
</div>

application.html.erb

<body>
    <%= link_to('Logout user', destroy_user_session_path, :method => :delete) %>
    <%= link_to('Logout admin', destroy_admin_session_path, :method => :delete) %>
    <%= yield %>
</body>

custom.css.scss

body{
      background-image:url('dark_leather.png');
      color: #333;
      font-family: verdana, arial, helvetica, sans-serif;
      line-height: 18px;
}

.container{
    vertical-align: center;
}

.modal{
    h3{
        font-family: 'Josefin Slab', serif;
        font-size: 18pt;
        font-weight: 400;
        color: #34DDDD;
    }
}

【问题讨论】：

所以我发现（从 Chrome 中的“检查元素”中），该页面打开了两个 <div class="modal backdrop in"></div>，而不仅仅是一个。这就是我必须单击两次才能使深色叠加层消失的原因。那么我怎样才能让它只打开一次（而不是两次）？

标签： javascript css ruby-on-rails-3 twitter-bootstrap modal-dialog

【解决方案1】：

在执行 ajax 请求之前隐藏模式。我有同样的问题，并解决了它。对我来说，更换包含实际模态窗口的容器更多的是一个问题。

如果这不起作用，您始终可以通过执行以下操作强制它消失：

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

【讨论】：

您好 Vector，感谢您的回答，但是“在执行 ajax 请求之前隐藏模式”是什么意思？我该怎么做？
向量，你刚刚复制了这个答案...(stackoverflow.com/questions/11519660/…)

【解决方案2】：

经过数小时的谷歌搜索和阅读，我找到了解决方案。

我首先找到了this，它把我带到了this，它把我带到了this。（很有用，因为它提供了替代解决方案和解释）。

简而言之：

1) 首先我将这个：config.serve_static_assets = false 添加到我的config/environments/development.rb 文件中。

2) 然后我在终端中运行rake assets:clean 命令。

3) 最后我删除了浏览器中的缓存。

它起作用了——以及为什么起作用，是在上面的链接中写的一个很长的解释；）

【讨论】：