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

Question

我在Rails中使用bootstrap-sass v2.1和bootstrap- modal Rails v2.1.1，但无法创建全屏模式。现在我有一个非常高的模式和一个基于demo的宽模式的组合，但我希望获得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类，而不是.mode-body。它已经离开了: 50%的蚂蚁顶部:20%。将.mode-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;
}