Question

我正在通过使用“更改”回调自定义Magnific弹出窗口/灯箱的标题以包含多行内容，并修改

的内容

this.content

在回调中

。它工作正常，除了如果弹出窗口中的图像很高，或者窗口重新调整到较小的高度这一事实，Magnific正在做的调整图像的“最大高度”的计算似乎只考虑标题的单行文本。

有谁知道调整图像的最大高度计算需要什么来考虑更高的标题框？

谢谢

* * 编辑

快速入侵“updateSize：”回调中第461行附近的jquery.magnific-popup.js让我解决了这个问题。这个弹出窗口/灯箱接受最大高度百分比似乎是合理的，这样它就不会填满屏幕。

这是我的更改，如果可能，我会感谢一些反馈。谢谢！

updateSize: function(winHeight) {

    if(mfp.isIOS) {
        // fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
        var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
        var height = window.innerHeight * zoomLevel;
        mfp.wrap.css('height', height);
        mfp.wH = height;
    } else {
        mfp.wH = winHeight || _window.height();
        // ########################################
        // CHANGE IS RIGHT HERE TO FORCE 80% height
        // ########################################
        mfp.wH *= 0.8;
    }
    // Fixes #84: popup incorrectly positioned with position:relative on body
    if(!mfp.fixedContentPos) {
        mfp.wrap.css('height', mfp.wH);
    }

    _mfpTrigger('Resize');

},

Answer 1

您可以在调整大小回调中限制图像的最大高度，这将为标题留出更多空间：

$('a.magnific').magnificPopup({
    type: 'image',
    callbacks: {
        resize: function() {
            var img = this.content.find('img');
            img.css('max-height', parseFloat(img.css('max-height')) * 0.95);
        }
    }
});

Answer 2

我想加我的贡献。因为我想在图像中包含标题和描述。这意味着我无法在视口空间中包含所有这些信息。描述被切断了，我留下了一个滚动条。

@alexantd - 我尝试了你的回调添加功能，只有在调整窗口大小时才会有效。

@ajhuddy - 您的解决方案对我来说非常合适。我能够很好地适应文本。虽然图像相当小，但顶部有很多空间。

我调整了填充以重新获得40px空间以显示稍大的图像。这是我的CSS。下面的CSS允许我将图像缩小到0.85（85％）。

.mfp-img {
  padding: 0px 0px 40px !important;
}
.mfp-close {
  margin-top: -40px;
}

Answer 3

else b.wH=a||v.height()**,b.wH*=.9**;b.fixedContentPos

Magnific Popup - 更高的mfp-bottom-bar导致最大图像高度问题

3 个答案: