在基础中居中显示模态答案

【问题标题】：Centre a reveal modal in foundation在基础中居中显示模态
【发布时间】：2015-03-31 05:36:48
【问题描述】：

我想在基础中居中定位显示模式。

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

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

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

【问题讨论】：

标签： jquery css modal-dialog zurb-foundation

【解决方案1】：

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

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

【讨论】：

它不会自动垂直居中。（见图）

【解决方案2】：

您可以使用以下 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%);
  }
}

【讨论】：

我没有意识到这是近 3 年前的事情。 :)