如何使Twitter引导模式全屏
<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模式popup全屏上面的代码，我试着玩CSS，但无法按照我想要的方式。 任何人都可以帮助我吧。
我使用下面的代码在Bootstrap 3中实现了这个function：
.modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-content { height: auto; min-height: 100%; border-radius: 0; }
一般来说，如果您对间距/填充问题有疑问，请尝试右键单击该元素（或在cmd上单击mac），然后在Chrome上select“检查元素”或在Firefox上select“使用萤火虫检查元素”。 尝试在“元素”面板中select不同的HTML元素，并实时编辑右侧的CSS，直到获得所需的填充/间距。
这里是一个现场演示
这是一个小提琴的链接
所选解决scheme不保留圆angular样式。 要保留圆angular，您应该减less宽度和高度一点点，并删除边框半径0.也不显示垂直滚动条…
.modal-dialog { width: 98%; height: 92%; padding: 0; } .modal-content { height: 99%; }
以下课程将在Bootstrap中创build一个全屏模式：
.full-screen { width: 100%; height: 100%; margin: 0; top: 0; left: 0; }
我不确定你的模态的内部结构是如何构build的，这可能会影响整体高度，这取决于与之相关的CSS。
来自@Chris J的片段有一些边缘和溢出的问题。 @YanickRochon和@Joana提出的基于@Chris J的fiddel的build议更改可以在以下jsfiddle中find。
这是为我工作的CSS代码：
.modal-dialog { width: 100%; height: 100%; padding: 0; margin: 0; } .modal-content { height: 100%; min-height: 100%; height: auto; border-radius: 0; }
你需要设置你的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>
基于以前对这个主题的回应（@Chris J，@kkarli），我提出了一个全屏模态的“响应式”解决scheme：
全屏模式只能在特定的断点上启用。 通过这种方式，模式将在较宽的（桌面）屏幕上显示“正常”，在较小的（平板电脑或移动设备）屏幕上显示全屏 ，使其具有原生应用程序的感觉。
我创build了以下需要添加到.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; } } /* 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; } } /* 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; } }
演示可在Codepen上find： https ://codepen.io/andreivictor/full/KXNdoO。
那些使用Sass作为预处理器的人可以利用下面的mixin：
@mixin modal-fullscreen() { padding: 0 !important; .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-content { height: auto; min-height: 100%; border: 0 none; border-radius: 0; } }
