CSS 如何使 Twitter 引导模式全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18432394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Twitter bootstrap modal full screen
提问by Hrishikesh Sardar
<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>
How do I make a twitter bootstrap modal popup full screen for the above code, I tried playing around with css but was not able get it the way I wanted. Can anyone please help me with it.
我如何为上述代码制作一个 twitter bootstrap 模式弹出全屏，我尝试使用 css 但无法按照我想要的方式获得它。任何人都可以帮我解决这个问题。
回答by Chris J
I achieved this in Bootstrap 3 with the following code:
我在 Bootstrap 3 中使用以下代码实现了这一点：
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
In general, when you have questions about spacing / padding issues, try right+clicking (or cmd+clicking on mac) the element and select "inspect element" on Chrome or "inspect element with firebug" on Firefox. Try selecting different HTML elements in the "elements" panel and editing the CSS on the right in real-time until you get the padding / spacing you want.
通常，当您对间距/填充问题有疑问时，请尝试右键+单击（或 cmd+单击 Mac）元素并在 Chrome 上选择“检查元素”或在 Firefox 上选择“使用萤火虫检查元素”。尝试在“元素”面板中选择不同的 HTML 元素并实时编辑右侧的 CSS，直到获得所需的填充/间距。
回答by Esteban
The chosen solution does not preserve the round corner style. To preserve the round corners, you should reduce the width and height a little bit and remove the border radius 0. Also it doesn't show the vertical scroll bar...
选择的解决方案不保留圆角样式。要保留圆角，您应该稍微减小宽度和高度并删除边框半径 0。它也不显示垂直滚动条...
.modal-dialog {
width: 98%;
height: 92%;
padding: 0;
}
.modal-content {
height: 99%;
}
回答by A. Morel
For bootstrap 4 I have to add media query with max-width: none
对于引导程序 4，我必须使用 max-width: none 添加媒体查询
@media (min-width: 576px) {
.modal-dialog { max-width: none; }
}
.modal-dialog {
width: 98%;
height: 92%;
padding: 0;
}
.modal-content {
height: 99%;
}
回答by andreivictor
I've came up with a "responsive" solution for fullscreen modals:
我为全屏模式提出了一个“响应式”解决方案：
Fullscreen Modals that can be enabled only on certain breakpoints. In this way the modal will display "normal" on wider (desktop) screens and fullscreen on smaller (tablet or mobile) screens, giving it the feeling of a native app.
只能在某些断点上启用的全屏模态。通过这种方式，模态将在较宽的（桌面）屏幕上显示“正常”，在较小的（平板电脑或移动设备）屏幕上显示为全屏，给人一种本机应用程序的感觉。
Implemented for Bootstrap 3and Bootstrap 4.
为Bootstrap 3和Bootstrap 4 实现。
Bootstrap v4
引导程序 v4
The following generic code should work:
以下通用代码应该可以工作：
.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;
}
By including the scss code below, it generates the following classes that need to be added to the .modalelement:
通过包含下面的 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% |
+---------------+---------+---------+---------+---------+---------+
The scss code is:
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();
}
}
}
Demo on Codepen: https://codepen.io/andreivictor/full/MWYNPBV/
Codepen 上的演示：https://codepen.io/andreivictor/full/MWYNPBV/
Bootstrap v3
引导程序 v3
Based on previous responses to this topic (@Chris J, @kkarli), the following generic code should work:
根据之前对此主题的回复（@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;
}
If you want to use responsive fullscreen modals, use the following classes that need to be added to .modalelement:
如果要使用响应式全屏模式，请使用以下需要添加到.modal元素的类：
.modal-fullscreen-md-down- the modal is fullscreen for screens smaller than1200px..modal-fullscreen-sm-down- the modal is fullscreen for screens smaller than922px..modal-fullscreen-xs-down- the modal is fullscreen for screen smaller than768px.
.modal-fullscreen-md-down- 对于小于1200px..modal-fullscreen-sm-down- 对于小于922px..modal-fullscreen-xs-down- 对于小于768px.
Take a look at the following code:
看看下面的代码：
/* 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;
}
}
Demo is available on Codepen: https://codepen.io/andreivictor/full/KXNdoO.
Codepen 上提供了演示：https://codepen.io/andreivictor/full/KXNdoO 。
Those who use Sass as a preprocessor can take advantage of the following mixin:
那些使用 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;
}
}
回答by micjamking
The following class will make a full-screen modal in Bootstrap:
下面的类将在 Bootstrap 中创建一个全屏模式：
.full-screen {
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
}
I'm not sure how the inner content of your modal is structured, this may have an effect on the overall height depending on the CSS that is associated with it.
我不确定您的模态的内部内容是如何构建的，这可能会对整体高度产生影响，具体取决于与其关联的 CSS。
回答by Vlad
for bootstrap 4
用于引导程序 4
add classes :
添加类：
.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;
}
and in HTML :
并在 HTML 中：
<div role="document" class="modal-dialog full_modal-dialog">
<div class="modal-content full_modal-content">
回答by kkarli
The snippetfrom @Chris J had some issues with margins and overflow. The proposed changes by @YanickRochon and @Joana, based on the fiddel from @Chris J can be found in the following jsfiddle.
@Chris J的片段在边距和溢出方面存在一些问题。@YanickRochon 和 @Joana 基于 @Chris J 的 fiddel 提出的更改可以在以下jsfiddle 中找到。
That's the CSS code that worked for me:
这是对我有用的 CSS 代码：
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}
回答by BenW
You need to set your DIV tags as below.
您需要如下设置您的 DIV 标签。
Find the more details > http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling
查找更多详细信息 > 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">×</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>
回答by Dementic
My variation of the solution: (scss)
我的解决方案的变化：（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)
(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%;
}
回答by Alireza Pars
.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;
}
