响应式放大弹出窗口

Question

我正在使用 Magnific Popups ajax popup 来创建有点像 Instagram 或 Facebook 的弹出体验（左侧图像，右侧评论等）。当图像可以垂直居中时，我将如何设置整个灯箱的最大高度并居中图像？这需要在所有浏览器中工作并且必须具有响应能力，这是很棘手的。我似乎无法让它在所有浏览器上正常工作。我想我不介意 jQuery 解决方案，因为这就是我可能需要的。

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

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

并且使用媒体查询缩小屏幕尺寸，从而清除浮动。

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

jsFiddle

尝试重新调整 iframe 的大小来查看效果。

Answer 1

最好的方法是jqueryUI调整大小。

如果你希望你的 div（容器）会根据窗口大小而改变，你应该这样做：

$(window).resize(function() {
    var docheight = $(document).height();
    $("#container").height(docheight);
});

Answer 2

工作示例

我想我已经解决了兼容性问题，并将最大高度设置为 300px，并针对 IE6 提供了解决方法。

JS：

$(document).ready(function () {
    $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midclick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});

// Handles the resize event
$(window).resize(fn_resizeImage);
$('.popup-with-zoom-anim').click(fn_resizeImage);
// Resizes the content2 to fit with image height
function fn_resizeImage() {
    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);
}

CSS：

img {
    width: 300px;
}
.view_container {
    max-height:100%;
    max-width: 850px;
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto");
    /* sets max-width for IE6 */
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
}
.image_container, .content {
    width: 50%;
    float: left;
}
.image_container img {
    max-height:300px;
    _height:expression(this.scrollWidth > 300 ?"300px" :"auto");
    /* sets max-width for IE6 */
    max-width: 100%;
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto");
    /* sets max-width for IE6 */
}
.image_container {
    text-align: center;
}
.content1, .content2 {
    background-color: #fff;
    padding: 1em;
}
.content {
    line-height: 1.231;
}
.content2 {
    height: 300px;
    overflow-y: scroll;
}
#small-dialog {
    max-width: 850px;
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto");
    /* sets max-width for IE6 */
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
}
@media (min-width: 1px) and (max-width: 638px) {
    .image_container, .content {
        width: auto;
        float: none;
        clear: both;
    }
    .image_container img {
        max-height:150px;
        max-width:150px;
        _height:expression(this.scrollWidth > 150 ?"150px" :"auto");
        /* sets max-width for IE6 */
        _width:expression(this.scrollWidth > 150 ?"150px" :"auto");
        /* sets max-width for IE6 */
    }
}

Answer 3

有一种方法可以使用纯 CSS3 转换将元素定位在页面中间，例如弹出窗口和模式框。

<div id="myelem"></div>

#myelem { width: 500px; height: 400px; position: fixed; top: 50%; left: 50%; background: red; transform: translate(-50%, -50%); }

不要忘记所有浏览器供应商前缀（例如

-webkit-

和

-moz-

）。另请记住，较旧的浏览器（IE9 或更低版本）根本无法识别

transform

。您需要为它们提供一个 JavaScript polyfill。

Answer 4

我不确定我是否理解整个问题，但这就是垂直和水平居中图像的方式：

演示：http://jsbin.com/ukowar/1/edit

结合

margin:auto

通过绝对位置居中

img {
  width:200px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

希望能帮助解决您的部分问题。