jquery - 将显示模式置于基础中心

Question

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

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，那么模态框将被切断。我也不能使用百分比宽度。

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

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

Answer 1

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

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

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

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

看起来您没有使用 scss，因此您需要类似的东西。

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