如何使 Bootstrap 模式全屏显示

<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>

我如何为上面的代码制作一个 Bootstrap 模式的弹出式全屏幕，我试过使用 css，但是不能得到我想要的效果。有人能帮帮我吗。

375219 次浏览
小开

下面的类将在Bootstrap中创建一个全屏模式：

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

我不确定你的模态的内部内容是如何构建的，这可能会对整体高度产生影响，这取决于与之相关的CSS.

小开
最佳答案

我在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上选择“ Inspect Element ”或在Firefox上选择“ Inspect Element with Firebug ”。尝试在“元素”面板中选择不同的HTML元素，并实时编辑右侧的CSS，直到获得所需的填充/间距。

这是一个现场演示。

这是小提琴的链接。

小开
选择

的解决方案不保留圆角样式。 为了保留圆角，你应该减少一点宽度和高度，并删除边界半径0.此外，它不显示垂直滚动条..

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


.modal-content {
height: 99%;
}
小开

你需要如下设置你的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>
小开
来自@Chris J

的片段存在边距和溢出问题。 @Yanickrochon和@Joana基于@Chris J的Fiddel提出的更改可在以下Jsfiddle中找到。

这就是为我工作的CSS代码：

.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}
小开

我想出了一个“响应式”全屏模态的解决方案：

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

针对引导程序3和引导程序4实施。包括在引导程序5中。

引导程序V5

默认情况下，全屏模态包含在引导程序5中：https：//getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal

引导程序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代码，它生成以下需要添加到__abc0元素的类：

+---------------------+---------+---------+---------+---------+---------+
|                     |   xs    |   sm    |   md    |   lg    |   xl    |
|                     | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen    |  100%   | default | default | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-sm |  100%   |  100%   | default | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-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/

引导程序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;
}

如果要使用响应式全屏模态，请使用以下需要添加到.modal元素的类：

  • .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;
}


}
小开

对于Bootstrap 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%;
}
小开

我的解决方案的变化： （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%;
}
小开 
.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;
}
小开

使用这个：

.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>
小开

对于引导程序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">
小开

对于Bootstap 4.5： 我刚刚将这段代码从Bootstap 5.scss复制到我的Sass中，它令人惊叹：

@media (max-width: 1399.98px)
.modal-fullscreen-xxl-down
width: 100vw
max-width: none
height: 100%
margin: 0
  

.modal-fullscreen-xxl-down .modal-content
height: 100%
border: 0
border-radius: 0
  

.modal-fullscreen-xxl-down .modal-header
border-radius: 0
  

.modal-fullscreen-xxl-down .modal-body
overflow-y: auto
  

.modal-fullscreen-xxl-down .modal-footer
border-radius: 0

对于HTML：

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-xxl-down">
...
</div>

这一切都是关于控制右边DIV的边距、宽度和高度。

小开 

.modal {
padding: 0 !important;
}
.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;
}
这对我来说是完美的工作方式，非常感谢。

小开

**如果你想让模态比正常的大，那么不需要写.CSS代码，我们可以直接写引导模态的类**

<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">

只有模态-对话框模态-XL和完成。


提交答案