以粉底为中心

Posted 2021-04-16

我想将揭示模式置于基础中心位置。

http://foundation.zurb.com/docs/components/reveal.html

我使用的I代码如下：

#quickViewModal{
  height: 400px;
  width: 600px;
  top: calc( 50% - 200px ) !important;
  left: calc( 50% - 300px ) !important;
  margin: 0 !important;
}

但是，此代码不支持响应式设计。即，如果用户调整宽度为500px的窗口大小，那么模态将被切断。我也不能使用百分比宽度。

如何创建显示并保持在中心的显示模式？

更新：似乎模态自动水平居中，但不是垂直居中。

答案

默认情况下，基础显示模态是响应和居中...将其大小限制为600px添加以下css（在基础的css之后）：

.reveal-modal{
    max-width:600px;
}

另一答案

您可以使用以下scss实现此目的。

.reveal {
  @include breakpoint(medium) {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

您需要在!important属性上使用top来覆盖基础设置的javascript值。

您还需要允许断点。在移动设备上，您希望全屏显示。

看起来你没有使用scss所以你需要有类似的东西。

@media print, screen and (min-width: 40em) {
  #quickViewModal{
    height: 400px;
    width: 600px;
    top: 50% !important;
    transform: translateY(-50%);
  }
}