如何设置 Bootstrap 模态框的样式，使其在 Rails 中可读？

Question

我有一个附加到复选框的模式：

.modal.fade{id:"vip-modal", tabindex:"-1", role:"dialog", "aria-labelledby" => "vip-modal", "aria-hidden" => "true"}
  %div{id:"modal-dialog"}
    %div{id:"modal-content"}
      .modal-header
        %h4{class:"modal-title", id:"vip-modal-label"} Notes
      .modal-body
        1. Welcome to the the Program!
      .modal-footer
        %button{type:"button", class:"btn btn-primary", "data-dismiss" => "modal"} Close

我在选中某个复选框时触发它。模态显示正常。

除了不是真的。它是覆盖整个屏幕的灰色覆盖层。文本在那里，但底层表单上的文本，尤其是粗体标签，会显示出来。不透明度或不透明度使其无法使用和不可读。

我的目标是让 window 出现在屏幕中央，让用户滚动浏览文本（我在它工作后添加更多内容，就像 EULA），并且当用户点击接受按钮（我还没有添加）时让它消失。

此默认 Bootstrap 模式在其当前形式下无法使用。

Answer 1

您在模态 div 上使用的是 ID 而不是类。查看文档：http://getbootstrap.com/javascript/#modals - 你会想要使用类 "modal-content" 和 "modal-dialog"

如何设置 Bootstrap 模态框的样式，使其在 Rails 中可读？

How can I style a Bootstrap modal so that it is readable in Rails?

ruby-on-rails

twitter-bootstrap-3

ruby-on-rails-4.2