jquery - Ruby on Rails 应用程序使用 facebook 发送按钮显示位于模态后面的控件

Question

为了让我的 facebook 发送按钮的模式显示在所有内容之上，我的页面的 css 出现问题。但是，如果光标在模态上，它显示得很好。当我将光标从模态框移开时，显示看起来是错误的。这是模式上的光标：

这是光标远离模态时的样子：

我现在才到达让所有父元素都具有 css 属性的地方overflow: visible，以便模态在超出这些元素的边界时不会被切断。但是当鼠标离开模态框时，下方的控件（有来自 Foundation 的按钮、文本字段和图标）会显示在模态框的前面。

如果我可以让 facebook 模式领先于一切而不必担心它，那将是非常棒的，但据我所知，这是不可能的。我已经尝试过 z-index 并且没有得到任何结果，就像我读过的每个有类似问题的人一样。

这是相关区域的周围 html。这是作为集合的一部分呈现的部分的一部分。每个图像底部的大图像是下一部分的一部分，并且在我在这里分享的代码之外：

<div class="row promote_and_stats" style="display: none; overflow: visible">
  <div class="eight columns">
    <div class="panel radius text-center">
      <div class="row"><h6>Promote</h6></div>
      <div class="promote_collapse">
        <div class="row">
          <div class="four columns">
            <div class="addthis_toolbox addthis_default_style">
              <a class="addthis_button_facebook_send"
                 addthis:url="<%= url_for(controller: 'things',
                                          action: 'show',
                                          id: f.unique_id.nil? ? f.id : f.unique_id,
                                          only_path: false) %>"
                 addthis:title="<%= @group.name %> - <%= f.title %> - blablabla.com">
              </a>
            </div>
            <small>Facebook</small>
          </div>
          <div class="four columns">
            <div class="addthis_toolbox addthis_default_style">
              <a class="addthis_button_tweet"
                 tw:text="<%= @group.name %> - <%= f.title %> - blablabla.com<%= url_for(controller: 'things',
                                                                                         action: 'show',
                                                                                         id: f.unique_id.nil? ? f.id : f.unique_id,
                                                                                         only_path: false) %>">
              </a>
            </div>
            <small>Twitter</small>
          </div>
          <div class="four columns">
            <div class="addthis_toolbox addthis_default_style">
              <a class="addthis_button_email"></a>
            </div>
            <small>Email</small>
          </div>
        </div>
        <div class="row">
          <div class="two columns"><i class="social foundicon-flickr"></i></div>
          <div class="ten columns">
            <input type="text"
                   placeholder="<%= url_for(controller: 'things',
                                            action: 'show',
                                            id: f.unique_id.nil? ? f.id : f.unique_id,
                                            only_path: false) %>">
          </div>
          <div class="four columns">
            <a class="small button view_thing_button"
               href="<%= url_for(controller: 'things',
                                 action: 'show',
                                 id: f.unique_id.nil? ? f.id : f.unique_id) %>"
               target="_blank">View</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="eight columns">
    <div class="panel radius text-center">
      <h6>Stats</h6>
    </div>
  </div>
</div>

任何人都可以就如何解决这个问题提供一些建议吗？谢谢！