ruby-on-rails - 如何使用 bootstrap-modal 制作全屏模式？

Question

我在 Rails 中使用 bootstrap-sass v. 2.1 和 bootstrap-modal-rails v. 2.1.1，但未能创建全屏模式。现在我有一个非常高的模态和一个基于演示的宽模态的组合，但我想获得 100% 的宽度和 100% 的高度。那可能吗？

#jbrowse-modal.modal.container.expand.hide.fade{"data-replace" => "true", :tabindex => "-1"}
  .modal-header
    %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
    %h3
      = @scaffold.name
    .modal-body
      %div{:style => "height: 1000px; overflow: hidden;"}
        %iframe{:id => "jbrowse-iframe", :src => "/JBrowse/was_index.html?loc=ctgA", :style => "border: 1px solid black"}

Answer 1

我在一个现有的项目上对此进行了测试。这些简单的规则应该让你朝着正确的方向前进：

#jbrowse-modal {
width: 100%;
left: 0;
margin-left: 0;
top: 0;
margin-top: 0!important;
height: 100%;
}

@tcgumus 在正确的轨道上。

Answer 2

我认为你应该使用 .modal 类而不是 .modal-body。它已经离开：50% 蚂蚁顶部：20%。将默认设置为您的 .modal-body 并更改 .modal。

请在模态中使用此代码

display: block;
width: 100% !important;
left: 0 !important;
margin: 0 !important;
height: 100% !important;

Answer 3

引导程序 3：

.modal-dialog {
  width: 98%;
  height: 98%;
  padding: 0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
}