jquery - 响应式弹出窗口

Question

我正在使用Magnific Popups ajax popup 来创建类似于 Instagram 的弹出体验（左侧的图像，右侧的评论等）。我试图弄清楚如何使左右内容框始终具有相同的高度。如果右侧的图像太大，它会相应地适合 div，因为它应该是响应式的。此外，如果整个浏览器变得更小（可能在移动设备上），图像会出现在顶部，内容会出现在底部。

图像和内容是这样浮动的：

.image_container, .content {
    width: 50%;
    float: left;
}

并且使用媒体查询减小了屏幕尺寸，浮动刚刚被清除。

我制作了一个 jsfiddle 来帮助理解我要解释的内容：

jsFiddle

如果您单击“打开”并调整 iframe 的大小，您将看到我正在寻找的效果。

那么视图容器如何设置大小并且左右内容区域总是相同的高度呢？只是简单地看一下这个例子，你会发现它看起来有点滑稽。

编辑

我还尝试将图像垂直居中，这似乎也是一个挑战。我已经尝试让 css 显示一个表格单元格然后尝试vertical-align: middle，但最终没有奏效。

该解决方案应该适用于所有现代浏览器。

score 5 · Accepted Answer

正如你所问的垂直对齐方式。我认为您可能需要类似的东西。

我检查了 firefox、chrome 和 safari。还有一些问题。

在 chrome 和 safari 中，您需要刷新才能看到响应，而不仅仅是调整大小。（这很有趣，我正在研究它。）
在 safari 中，#small-dialog 的最大宽度停止工作。

核心部分应该是

.image_container, .content {
    display: table-cell;
    background: #3D6AA2;
    vertical-align: middle;
    width: 50%;
}
@media (min-width: 1px) and (max-width: 638px) {
    .image_container, .content {
        width: 100%;
        display: block;
    }
}
#small-dialog {
    max-width: 850px;
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
    display: table;/*newly added*/
    table-layout: fixed;/*newly added*/
}

score 4 · Accepted Answer

你正在寻找这样的人吗？
http://jsfiddle.net/d7hA5/

考虑以下函数：

// Handles the resize event
$(window)
    .off(".resizeImage")
    .on("resize.resizeImage", fnResizeImage);

// Resizes the content2 to fit with image height
function fnResizeImage (e) {
    var imgHeight = $('div.image_container > img').outerHeight(true);
    var cnt1Height = $('div.content > div.content1').outerHeight(true);
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height);
}

还建议查看插件文档：Magnific-popup API

score 1 · Accepted Answer

使用原始 CSS （有点）可能，但您必须更改 html 的结构。如果您不使用浮动，则图像和每个父元素都具有图像的高度 + 来自其他元素的额外高度以及 +/- 边距和填充。可以通过使用边距在其父元素之外显示元素。我使用它为图像的父元素着色，然后将图像移出该父元素以获得您想要的外观。

也就是说，我所做的解决方案有些混乱，如果评论超过图像的高度，我怀疑它是否有效。我不知道哪些浏览器可以“正确”显示（我被迫在这里使用 IE9，而且我没有花太多时间正确对齐）。希望它能让你知道你能做什么。我认为在这种情况下，一点点 jQuery 可能更合适。

“工作”示例和生成它的代码。

另一方面：尽管表格在浏览器之间有些不一致，但这可能是使用它们的合适地方。

score 1 · Accepted Answer

您的问题是，当窗口大小变得小于 xa 时，特殊媒体 css 声明将应用于您的图像容器（使用任何元素检查器检查自己）

INLINE:57 @media (min-width:1px) and (max-width: 638px)

.image_container, .content {
width: auto;
float: none;
clear: both;
}

删除 50% 的宽度和浮动以及您想要的效果，

只需删除该部分，它就可以按您的意愿工作

干杯

score 0 · Accepted Answer

我写了 3 种方法来解决小猫和小狗的问题，你可以在下面查看：

但我认为如果你真的对高度或宽度很敏感，更好的方法是绝对使用 Javascript 设置高度和宽度。

使用 Javascript：

http://jsfiddle.net/d7hA5/11/

使用 CSS 方法 1：

像这样使用height:100vh：

http://jsfiddle.net/d7hA5/9/

了解vh的更多示例：

http://jsfiddle.net/JamesD/hr8sL/1/

使用 CSS 方法 2：

使用flex:1这样的属性：

http://jsfiddle.net/d7hA5/10/

更多理解 flex 的例子：

http://jsfiddle.net/VgGbv/

score 0 · Accepted Answer

检查这个：

jsfiddle

这是您的代码略有更改。（检查问题评论以获取提示）。我将您的容器包装在 div 中：

<div class="container">

并将这一些更改添加到 css：

.container {background-color: white}
.image_container, .content {
    /* width: 50%;*/
    float: left;
    background-color: #1c1c1c;
}
.content2 {
    height: 300px;
    overflow-y: auto;
}

jquery - 响应式弹出窗口

6 回答 6

Related

Reference