如何使 Twitter 引导模式全屏
Posted
技术标签:
【中文标题】如何使 Twitter 引导模式全屏【英文标题】：How to make Twitter bootstrap modal full screen 【发布时间】：2013-08-28 06:00:17 【问题描述】：<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 引导模式弹出全屏，我尝试使用 css 但无法按照我想要的方式得到它。谁能帮帮我。
【问题讨论】：
【参考方案1】：我在 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 上选择“使用 firebug 检查元素”。尝试在“元素”面板中选择不同的 html 元素并实时编辑右侧的 CSS，直到获得所需的填充/间距。
Here is a live demo
Here is a link to the fiddle
【讨论】：
我还要将margin: 0 添加到.modal-dialog。
顺便说一句：.modal-content 的内容在底部溢出并向下滚动时会中断。应该是min-height: 100%; height: auto;
如果为移动应用程序设计，您可以将 Chris 的 CSS 放在媒体查询中，以获得更宽屏幕的正常模式宽度 @media(max-width: 768px) ...
如果您需要“几乎”全屏模式，也可以添加 .modal padding: ...px
.modal-dialog 还需要 max-width: 100%; 用于 bootstrap 4【参考方案2】：
我为全屏模式想出了一个“响应式”解决方案：
只能在在某些断点上启用的全屏模式。这样模态将在更宽的（桌面）屏幕上显示“正常”，在更小的（平板电脑或移动）屏幕上显示全屏，给人一种原生应用的感觉。
为 Bootstrap 3 和 Bootstrap 4 实施。 Bootstrap 5 中默认包含。
引导 v5
Bootstrap 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代码，它会生成以下需要添加到.modal元素的类：
+---------------------+---------+---------+---------+---------+---------+
| | 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 中，如果您在带有.modal-dialog 的元素上使用 .modal-dialog-scrollable，您可能需要在上述 v4 SCSS 代码中添加以下内容，以强制模态扩展整个高度视口的：.modal-dialog.modal-dialog-scrollable max-height: 100%; 和 .modal-dialog.modal-dialog-scrollable .modal-content max-height: 100%; 【参考方案3】：
所选解决方案不保留圆角样式。 要保留圆角，您应该稍微减小宽度和高度并删除边框半径 0。而且它不显示垂直滚动条...
.modal-dialog
width: 98%;
height: 92%;
padding: 0;
.modal-content
height: 99%;
【讨论】：
一个更正确的答案，保留了圆角模型的感觉，接受的答案呈现覆盖层而不是模态 如果模态框占据了全屏，如果你周围有圆角，它看起来会很糟糕（恕我直言）。【参考方案4】：对于 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%;
【讨论】：
【参考方案5】：对于引导程序 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">
【讨论】：
【参考方案6】：以下类将在 Bootstrap 中制作全屏模式：
.full-screen
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
我不确定模态框的内部内容是如何构成的，这可能会对整体高度产生影响，具体取决于与之关联的 CSS。
【讨论】：
什么是 .fullscreen ？我在#myModal 中包含了css，它适用于宽度但不适用于高度。.fullscreen 是我为解决问题而创建的一个类，它不包含在 Bootstrap 中。您可以在JSFiddle 或CodePen 上发布您的代码示例吗？如果没有看到您的代码，我无法帮助您。
要添加高度，您需要在模型主体而不是 #myModal 上添加高度。【参考方案7】：
来自@Chris J 的snippet 在边距和溢出方面存在一些问题。 @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;
【讨论】：
【参考方案8】：对于引导程序 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的边距、宽度和高度。
【讨论】：
【参考方案9】：您需要如下设置您的 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">×</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>
【讨论】：
【参考方案10】：.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;
【讨论】：
欢迎来到 Stack Overflow。没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。【参考方案11】：**如果你想让Modal比普通的大那么就不用写.css代码，直接写bootstrap modal的类**
<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">只有 modal-dialog modal-xl 并完成。
【讨论】：
【参考方案12】：我的解决方案变体： (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%;
【讨论】：
【参考方案13】：.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;
【讨论】：
尝试更清楚地解释为什么这是问题的答案。【参考方案14】：使用这个：
.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">×
</button>
<h4 class="modal-title">hi</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
【讨论】：
以上是关于如何使 Twitter 引导模式全屏的主要内容，如果未能解决你的问题，请参考以下文章
加载 twitter 引导模式对话框时，如何防止正文滚动条和移位？