【问题标题】:Foundation Reveal Modal with Max-Width具有最大宽度的基础显示模态
【发布时间】:2014-02-06 03:41:00
【问题描述】:

这是fiddle

我正在使用Foundation 框架,特别是reveal 插件,以便在单击按钮后将弹出窗口滑入视图。这将包含一张我想填满整个弹出窗口的图像。

这很有效,除非窗口大小比图像宽,在这种情况下,图像不再填满整个弹出窗口。我可以通过覆盖一些 CSS 来解决这个问题:

.reveal-modal {
    padding: 0;
    max-width: 950px; /* always will be maximum image width */
    background: transparent;
}

但是,在执行此操作后,我想不出一个在窗口中水平居中弹出窗口的好方法。有什么想法吗?

【问题讨论】:

    标签: css popup responsive-design modal-dialog zurb-foundation


    【解决方案1】:

    如果您的图像大小不同,并且您总是希望它们填充模态框的整个宽度,您可以尝试 CSS3 background-size:contain;将图像缩放到超出其原始大小。否则只需将模态的宽度设置为最小尺寸的图像并使用 width:100%;。 Foundation 显示具有您应该自定义和利用的大小类。图像居中与绝对定位有关,因此您需要使用以下命令覆盖 Foundation 的样式:

    左:0; 右 0; 边距:自动;

    【讨论】:

    • 我希望图像占据整个模态,但仅在它们的宽度为 950 像素之前,同时保持模态居中。你是什​​么意思将模态的宽度设置为最小尺寸的图像并使用宽度 100%?我怎样才能将它设置为两个不同的东西?你能不能试着用你的代码更新小提琴,我不能让它工作。
    【解决方案2】:

    想出了一个解决方案,不知道为什么我之前没有想到它。我只是将modal中的所有内容放到另一个div中,样式如下:

    .reveal-modal-inner {
        margin: 0 auto;
        position: relative;
        max-width: 950px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }
    

    完美运行,这里是updated fiddle

    【讨论】:

    • 这实际上不适用于小屏幕,这是我的 sass 版本的 fork:pastebin.com/E2Ch1t6a
    • 不确定您所说的它不起作用是什么意思。此解决方案适用于在较大屏幕上设置最大宽度,在较小屏幕上,模式仍应为 90% 宽度或其他任何值
    【解决方案3】:

    这也有效...

    // styling to make reveal-modal have a max-width
    
    .reveal-modal {
        padding: 0;
        background: transparent;
        border: 0px;
        @include box-shadow(none);
    }
    
    .reveal-modal-inner {
        padding: 1.25rem;
        margin: 0 auto;
        position: relative;
        max-width: 650px;
        @include box-shadow(0 0 10px rgba(0,0,0,0.4));
        background-color: white;
    }
    
    @media #{$medium-up} {
      .reveal-modal-inner {
        padding: 1.875rem;
      }
    }
    

    ...这里我使用 compass 来处理 box-shadow 生成和 Foundation 的 scss 断点。显然,这种情况下的最大宽度为 650 像素,但您可以将其增加到适合您的情况。内部模态背景设置为白色,以便您可以看到您的内容/段落/表单/等。

    希望对基础 5.1 有帮助

    【讨论】:

      猜你喜欢
      • 2017-07-31
      • 1970-01-01
      • 1970-01-01
      • 2019-10-24
      • 2020-08-05
      • 2017-10-18
      • 2021-05-28
      • 2015-03-31
      • 2016-04-21
      相关资源
      最近更新 更多