模态加载页眉和页脚而不是仅加注页面

Question

我正在尝试使用http://jquerymodal.com/进行简单的模态签名。但出于某种原因点击link_to模态。打开应用程序html的另一个视图。这是一个截图：

以蓝色突出显示唯一应该显示的内容但由于某种原因整个应用程序正在呈现...这是我要呈现的页面的HTML：

asm

MODAL OPEN

<div id="modal">
  <h2>Sign In</h2>

  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="field">
      <%= f.email_field :email, class: "form-input", autofocus: true, placeholder: "Email" %>
    </div>

    <div class="field">
      <%= f.password_field :password, class: "form-input", autocomplete: "off", placeholder: "Password" %>
    </div>

    <% if devise_mapping.rememberable? -%>
      <div class="field">
        <%= f.check_box :remember_me %>
        <%= f.label :remember_me %>
      </div>
    <% end -%>

    <div class="actions">
      <%= f.submit "Log in" %>
    </div>
  <% end %>

  <%= render "devise/shared/links" %>
</div>

我觉得我在这里遗漏了一些明显的东西。它可能是什么？

Answer 1

   <div id="ex1" style="display:none;">
    <p>modal text........<a href="#" rel="modal:close">Close</a> or press ESC</p>
   </div>

   <p><a href="#ex1" rel="modal:open">Open Modal</a></p>

Answer 2

尝试

<div ID="Modal"></div>

在容器div之外。因为它继承了它的{-1}}父元素的Box大小。另外需要注意的是，您将通过JQuery仅调用模态ID，因此不应在模态元素中继承Container Element的样式。所以我认为问题仅限于此。

Answer 3

大概是模态打开回到服务器来获取要呈现的代码（在new_user_session_path上）？

这将重新呈现您的布局application.html.erb，这就是您看到页眉和页脚也出现的原因。

此处的解决方案是关闭user_sessions控制器中的布局，或者（例如，如果您要渲染到iframe）将其替换为辅助布局，例如application_modal.html.erb除了设置样式表之外什么都不做。

您可以在this question中找到有关使用布局的更多信息。