Question

我在Rails中使用bootstrap-sass v.2.1和bootstrap-modal-rails v.2.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"} &times;
    %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

Bootstrap 3：

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

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

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

3 个答案: