如何使Twitter引导模式全屏

Question

<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玩耍,但没能得到它,我想要的方式.任何人都可以帮助我.

Answer 1

我使用以下代码在Bootstrap 3中实现了这一点:

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

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

通常,当您对间距/填充问题有疑问时,请尝试右键单击(或cmd +单击Mac)元素并在Chrome上选择"inspect element"或在Firefox上选择"使用firebug检查元素".尝试在"元素"面板中选择不同的HTML元素并实时编辑右边的CSS,直到获得所需的填充/间距.

这是一个现场演示

这是小提琴的链接

Answer 2

所选择的解决方案不保留圆角样式.要保留圆角,您应该稍微减小宽度和高度并删除边框半径0.此外,它不显示垂直滚动条...

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

.modal-content {
  height: 99%;
}

Answer 3

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

Answer 4

以下类将在Bootstrap中创建一个全屏模式:

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

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

Answer 5

基于对该主题的先前答复（@Chris J，@ kkarli），我想出了一种用于全屏模式的“响应式”解决方案：

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

我创建了以下需要添加到.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;
  } 
}

/* 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上获得：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;
  }

}

Answer 6

来自@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;
}

Answer 7

用于自举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">