如何使Twitter引导模式全屏显示

160 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

我如何全屏显示以上代码的Twitter Bootstrap模态弹出窗口，我尝试使用CSS，但无法按照我想要的方式获得它。任何人都可以帮我。

css  twitter-bootstrap 
— 希里希什·萨达尔
source

Answers:

280

我在Bootstrap 3中使用以下代码实现了这一目标： 

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

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

通常，当您对间距/填充问题有疑问时，请尝试右键单击（或在Mac上为cmd +单击）该元素，然后在Chrome上选择“检查元素”，在Firefox上选择“检查带有萤火虫的元素”。尝试在“元素”面板中选择不同的HTML元素，并在右侧实时编辑CSS，直到获得所需的填充/间距。

这是现场演示

这是小提琴的链接

— 克里斯·J
source
12
我也想补充margin: 0到.modal-dialog。
— harrison4
10
顺便说一句：.modal-content当内容在底部溢出并向下滚动时，的高位中断。应该是min-height: 100%; height: auto;
— Yanick Rochon 2015年
3
如果是为移动应用程序设计，则可以将Chris的CSS放入媒体查询中，以具有适用于更宽屏幕的标准模式宽度@media（max-width：768px）{...}
— Nicolas Connault
如果您需要“几乎”全屏模式，也可以添加.modal {padding：... px}
— andrii 2016年
8
.modal-dialog还需要max-width: 100%;为引导4
— 阿南德Rockzz
25

所选解决方案不保留圆角样式。要保留圆角，应稍微减小宽度和高度，并删除边界半径0。而且它不显示垂直滚动条...

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

.modal-content {
  height: 99%;
}
— 埃斯特万
source
1
一个更正确的答案，它保留了带有圆角的模型的感觉，被接受的答案表示的是叠加层而不是模式的层
— Clain Dsilva
如果模态占据了整个屏幕，那么如果您的圆角周围出现模态，它会看起来很可怕（IMHO）。
— 痴呆症
16

对于引导程序4，我必须添加具有最大宽度的媒体查询：无

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

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

.modal-content {
  height: 99%;
}
— A.莫雷尔
source
15

我想出了一种用于全屏模式的“响应式”解决方案：

全屏模式只能在某些断点上启用。这样，模态将在较宽的（桌面）屏幕上显示“正常”，而在较小的（平板电脑或移动设备）屏幕上显示全屏，给人以本地应用程序的感觉。

为Bootstrap 3和Bootstrap 4实施。

Bootstrap v4

以下通用代码应该起作用：

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

通过包含下面的scss代码，它生成需要添加到.modal元素的以下类：

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

scss代码是：

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

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

  .modal-body {
    overflow-y: auto;
  }

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

Codepen上的演示：https ://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

根据以前对此主题的答复（@Chris J，@ kkarli），以下通用代码应该可以工作：

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

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

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

如果要使用自适应全屏模式，请使用以下需要添加到.modalelement的类：

  • .modal-fullscreen-md-down-对于小于的屏幕，模式为全屏显示1200px。
  • .modal-fullscreen-sm-down-对于小于的屏幕，模式为全屏显示922px。
  • .modal-fullscreen-xs-down-模态为全屏显示，屏幕小于768px。

看下面的代码：

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

演示可在Codepen上获得：https ://codepen.io/andreivictor/full/KXNdoO 。

那些使用Sass作为预处理器的人可以利用以下mixin：

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

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

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}
— Andreivictor
source
11

以下课程将在Bootstrap中制作全屏模式：

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

我不确定模态的内部内容的结构，这可能会对整体高度产生影响，具体取决于与之关联的CSS。

— 嘲笑
source
什么是.fullscreen？我在#myModal中包含了css，但它只适合宽度而不是高度。
— 希里希斯·萨达尔2013年
.fullscreen是我为解决问题而创建的类，它不包含在Bootstrap中。您可以在JSFiddle或CodePen上发布代码示例吗？如果看不到您的代码，我无济于事。
— micjamking
要增加高度，您需要在模型主体而不是#myModal上增加高度。
— QasimRamzan 2015年
9

用于自举4

添加类：

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

和在HTML中：

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">
— 弗拉德
source
7

@Chris J 的代码片段存在边距和溢出问题。@YanickRochon和@Joana基于@Chris J的字段建议的更改可以在以下jsfiddle中找到。

那是对我有用的CSS代码：

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
— 卡卡利
source
2

您需要如下设置DIV标签。

查找更多详细信息> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>
— 奔威
source
-1

我的解决方案的变体：（scss）

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

（css）

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}
— 痴呆症
source
-1 
.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}
— Alireza Pars
source
2
尝试更清楚地解释为什么这是问题的答案。
— Jeroen Heier '18
-1

用这个：

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

所以：

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>
— hojjat.mi
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.